Line charts with more than one dataset

Each dataset is displayed in a line chart by a separate line. The following example adds a new set of values to our chart, that is, the average monthly temperatures measured in 1880. We can now plot both datasets in the same grid and compare them with the average temperatures in 2016, as follows:

// NASA/GISS Temperature anomalies from 1880 to 2016
let values2016 =
[1.17,1.35,1.3,1.09,0.93,0.76,0.83,0.98,0.87,0.89,0.93,0.81];
let values1880 =
[-0.3,-0.21,-0.18,-0.27,-0.14,-0.29,-0.24,-0.08,-0.17,-0.16,-0.19,
-0.22];
Chart.defaults.global.elements.line.fill = false;

let labels =
["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov",
"Dec"];

let dataObj = {
labels: labels,
datasets: [{
label: '2016',
data: values2016,
borderColor: 'hsla(300,100%,50%,1)',
borderDash: [5, 5],
},{
label: '1880',
data: values1880,
borderColor: 'hsla(200,100%,50%,1)'
}]
}
// the rest of the code is identical

The result of the preceding code is shown in the following chart. The full code is in LineArea/line-6-datasets.html. The chart reveals that the average temperature anomalies in 2016 are approximately 1° C higher than the measurements in 1880:

Line chart with two datasets (code: LineArea/line-6-datasets.html)

The fill property can be used with a Boolean value to turn on/off shading for all lines, but it can also be used as a dataset property to configure a shading strategy for individual datasets. In this case, it receives a string identifying an axis line: 'start', 'end', or 'origin', which will shade the chart between the line and an axis line (smallest, largest, or zero axis, respectively). It can also shade between lines, specifying a relative number as a string: '-1' will shade between the current dataset and the previous one, '+2', will shade from the current dataset to the dataset that is two positions higher in the dataset array. You can also refer to an absolute index of the dataset array. The following chart compares the effects of some of these fill strategies:

Fill strategies for line charts (code: LineArea/line-7-fill.html)
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset