Filling area between two lines

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!

How do I smooth a line in JavaScript graph?

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 .

What are the types of line charts?

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>

The result

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

Filling area between two lines - Chart.js v2

Tags:

javascript

html

html5-canvas

chart.js

Miguel Péres

People also ask

2 Answers

Boris Kingma

Ussama Zubair

Recent Activity

Donate For Us