Filling area between two lines in line chart using Chart.js - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Filling area between two lines in line chart using Chart.js

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <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 = {             
                type: 'line',
                data: {// w ww .j  av  a2  s.  c  o  m
                    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',
                        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>

Related Tutorials