Line Chart
Data visualisation using SVG Line Chart.
Projects /
Projects /
Data visualisation using SVG Line Chart.
Use this component to create line charts to represent your data.
You can initialize your chart using the Chart object and setting the type option equal to 'line':
var lineChart1 = document.getElementById('line-chart-1');
if(lineChart1) {
new Chart({
element: lineChart1,
type: 'line',
datasets: [
{
data: [[0, 1], [2, 2], [4, -3], [8, 12], [10, 8]]
}
]
});
}The component comes with a list of options you can use to customize your chart.
Set smooth option to true if you want a smooth line connecting your points (default is a straight line):
new Chart({
element: lineChart1,
type: 'line',
smooth: true,
// ...
});Pass your data using the data property of the datasets option:
new Chart({
element: lineChart1,
type: 'line',
datasets: [
{
data: [[1, 1], [2, 2], [3, -3], [4, 12], [5, 8], [6, 7], [7, 10]]
}
],
// ...
});In the example above, data are passed as a couple of values ([x-value, y-value]).
You can pass an array of single values (y-value only); in this case, the x-axis value will be an increasing integer value (starting from zero).
For that kind of data, you can use the labels property of the x-axis to pass a custom list of labels (see demo).
new Chart({
element: lineChart1,
type: 'line',
datasets: [
{
data: [1, 2, -3, 12, 8, 7, 10, 4, 9, 5, 16, 3]
}
],
xAxis: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
// ...
});For multiline charts, you can pass multiple data arrays (see --multiline demo):
new Chart({
element: lineChart1,
type: 'line',
datasets: [
{data: [1, 2, -3, 12, 8, 7, 10, 4, 9, 5, 16, 3]},
{data: [10, 3, 8, 15, 5, 10, 12, 0, 8, 12, 15, -1]}
],
xAxis: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
// ...
});For each axis, you can set the following options:
line: set to true if you want to show the axis line;legend: add a legend to the axis;labels: set it to true if you want to show labels on the axis. You can also pass an array of predefined labels (e.g, ['2018', '2019', '2020']). This is usually used for the x-axis when the data passed is an array of single values (see Data Sets section);labelModifier: function to modify the axis label values;range: set a range of values for the axis (e.g., [minVal, maxVal]); when setting a range, you'll need to pass the step option as well;step: delta between adjacent labels on the axis (e.g., 2). Applicable only if range is set;ticks: set to true if you want to add ticks to the axis (applicable to x-axis only);guides: set to false if you want to hide the chart horizontal guides (applicable to x-axis only);new Chart({
element: lineChart1,
type: 'line',
datasets: [
{
data: [[1, 1], [2, 4], [3, 5], [5, 12], [7, 8], [9, 7], [12, 10]]
}
],
xAxis: {
labels: true,
line: true,
ticks: true,
labelModifier: function(value) {
return 'Day '+value;
}
},
yAxis: {
labels: true,
labelModifier: function(value) {
return '$'+value;
},
legend: 'Revenue',
range: [0, 15],
step: 5
},
// ...
});Set the yIndicator option to false if you do not want to show the y indicator line when hovering over the chart. Default is true.
new Chart({
element: lineChart1,
type: 'line',
datasets: [
{
data: [[1, 1], [2, 4], [3, 5], [3, 12], [3, 8], [3, 7], [3, 10]]
}
],
tooltip: {
enabled: true,
},
yIndicator: false
// ...
});You can use the following options to customize the chart tooltips:
enabled: set to true to show tooltips;customHTML: function to customize the tooltip content;classes: list of custom classes to be added to the tooltip;position: it could be top or bottom; in this case the tooltip will be visible in the top or bottom part of the chart. If not set, the tooltip vertical position will change to follow the chart markers. new Chart({
element: lineChart1,
type: 'line',
datasets: [
{
data: [[1, 1], [2, 4], [3, 5], [3, 12], [3, 8], [3, 7], [3, 10]]
}
],
tooltip: {
enabled: true,
customHTML: function(index, chartOptions, datasetIndex) {
// x-axis value: chartOptions.datasets[datasetIndex].data[index][0]
// y-axis value: chartOptions.datasets[datasetIndex].data[index][1]
var customContent = '<span>'+chartOptions.datasets[datasetIndex].data[index][0]+'</span> : <b>'+chartOptions.datasets[datasetIndex].data[index][1]+'<b>';
return customContent;
}
}
// ...
});Use the animate option to animate the chart data when it enters the viewport.
new Chart({
element: lineChart1,
type: 'line',
datasets: [
{
data: [[1, 1], [2, 4], [3, 5], [3, 12], [3, 8], [3, 7], [3, 10]]
}
],
animate: true,
// ...
});You can use the Line Chart component to plot your data at progressive intervals of time (see timeline demo). For this type of data, make sure to:
datasets (using new Date('yyyy-mm-dd').getTime());range for your x-axis;Here's an example of a timeline chart:
var timelineChart = document.getElementById('timeline-chart');
if(timelineChart) {
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function getNiceDate(timestamp) {
// custom function to transform timestamp values to formatted dates
var date = new Date(timestamp);
var day = date.getDate(),
month = date.getMonth();
return day+' '+months[month]; //e.g., '12 Mar'
};
// use new Date('yyyy-mm-dd').getTime() to get the timestamp value of your date
new Chart({
element: timelineChart,
type: 'line',
xAxis: {
line: true,
labels: true,
// range: [firstDate, lastDate]
range: [new Date('2018-02-12').getTime(), new Date('2018-03-15').getTime()],
step: (86400000*2), // two days step,
labelModifier: function(value) {
return getNiceDate(value);
},
},
yAxis: {
labels: true
},
datasets: [
{
data: [
[new Date('2018-02-12').getTime(), 1],
[new Date('2018-02-16').getTime(), 10],
[new Date('2018-02-19').getTime(), 7],
[new Date('2018-02-25').getTime(), 12],
[new Date('2018-03-01').getTime(), 8],
[new Date('2018-03-05').getTime(), 10],
[new Date('2018-03-15').getTime(), 4]
]
}
],
tooltip: {
enabled: true,
customHTML: function(index, chartOptions, datasetIndex) {
return getNiceDate(chartOptions.datasets[datasetIndex].data[index][0]) +' - '+ chartOptions.datasets[datasetIndex].data[index][1];
}
},
animate: true
});
}When hovering hover your chart, you can decide to update an external element with the chart selected value (see --external-data-value demo). In this case, make sure to:
.js-ext-chart-data-x to the element you want to fill with the x-axis selected value;.js-ext-chart-data-y to the element you want to fill with the y-axis selected value; data-chart attribute equal to the id of the chart element;externalData option to true when initializing the Chart object.<p class="text-md margin-bottom-sm">
<span data-chart="ext-line-chart" class="js-ext-chart-data-x">Total</span>:
<span data-chart="ext-line-chart" class="js-ext-chart-data-y">69</span>
</p>
<div class="chart chart--line" id="ext-line-chart">
<div class="chart__area js-chart__area">
<!-- chart will be created here using JavaScript-->
</div>
</div>
<script>
var chart = document.getElementById('ext-line-chart');
new Chart({
element: chart,
type: 'line',
xAxis: {
// ...
},
yAxis: {
// ...
},
datasets: [
// ...
],
externalData : true,
// ...
});
</script>If you want to modify the selected values before using them as content of the .js-ext-chart-data-x/.js-ext-chart-data-y elements, use the customXHTML and customYHTML functions of the externalData option:
new Chart({
element: chart,
type: 'line',
xAxis: {
// ...
},
yAxis: {
// ...
},
datasets: [
// ...
],
externalData : {
customXHTML: function(index, chartOptions, datasetIndex) {
return 'X-value: '+chartOptions.datasets[datasetIndex].data[index][0];
},
customYHTML: function(index, chartOptions, datasetIndex) {
return 'Y-value: '+chartOptions.datasets[datasetIndex].data[index][1];
},
}
// ...
});For multiline charts, use the .js-ext-chart-data-x--{n} and .js-ext-chart-data-y--{n} classes, where {n} is the set index (starting from 1).
