Menu
I am trying to fill the area between two lines in a line chart using Chart.js. Like this: 
There is already an answer here, that explains how to extend chartjs to do this. But I know this feature is now native in V2 (from this thread on the github issues page), the problem is I just can't find documentation referring to this.
Is there a section about this in the doc? Anyone know how to use this feature?
Thanks!
937
This can be done through the option lineTension that needs to be defined on your dataset. Choose a value below 1. By default, you should however already see curved smooth lines since accoring to Chart. js documentation, the default value is 0.4 .
In statistics, there are three main types of line charts: a simple line chart, a multiple line chart, and a compound line chart. A simple line chart is plotted with only a single line.
Make sure you import the 2.6.0 version:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
Then follow the rules as described here: http://www.chartjs.org/docs/latest/charts/area.html
Below is an example, and how it looks:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My two lines with colour between them</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<body>
<canvas id="mychart" width="300" height="200"></canvas>
<script>
var ctx = document.getElementById('mychart').getContext('2d'); //get the context (canvas)
var config = { //configure the chart
type: 'line',
data: {
labels: [1, 2, 3, 4],
datasets: [{
label: "Min",
backgroundColor: 'rgba(55, 173, 221, 0.6)',
borderColor: 'rgba(55, 173, 221, 1.0)',
fill: false, //no fill here
data: [5, 5, 3, 2]
},
{
label: "Max",
backgroundColor: 'rgba(55, 173, 221, 0.6)',
borderColor: 'rgba(55, 173, 221, 1.0)',
fill: '-1', //fill until previous dataset
data: [8, 7, 6, 5]
}]
},
options: {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
}
};
var chart = new Chart(ctx, config);
</script>
</body>
</html>
51
Setting fill property to +1 of a dataset will set the backgroundColor from this line to the next line in dataset.
datasets: [{
label: 'Systolic Guideline',
data: [],
fill: '+1',
borderColor: '#FFC108',
backgroundColor: 'rgba(255,193,8,0.2)'
},
{
label: 'Diastolic Guideline',
data: [],
fill: true,
borderColor: '#FFC108',
backgroundColor: 'rgba(0,0,0,0)'
}]
See this: https://www.chartjs.org/samples/latest/charts/area/line-datasets.html
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
