Filling area between two lines - Chart.js v2

13
votes

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!

3
javascripthtmlhtml5-canvaschart.js
In the thread you linked, it says that the area is filled to the 0 line. so if the line is positive, the area fills underneath it (till the 0 line) and if the line is negative, it fills the area above it (till the 0 line). You might need to the use the extending method to get what you want. – Pedro Estrada
I was going with the extend suggestion, but if chartjs version 2 has a native way of doing this, it should be better, right? – Miguel Péres
Have you managed to replicate this in v2? Native or by extending? – Sebastian Popa
@SebastianPopa Not yet, I'm tackling another issue for now, since this is not a priority for me. But I intend to find out how to do this natively. If I find out, I will give an update answering the question here. I ask you (or anyone else) to do the same :) – Miguel Péres

3 Answers

1
votes

Here is a small plugin that can do shading between any two dataset lines.

https://stackoverflow.com/a/41733045/852977

24
votes

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>

The result

2
votes

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