[Chartjs]-Filling area between two lines – Chart.js v2

by

0👍

✅

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

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

27👍

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

4👍

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

Leave a comment