Chart.js Line chart: Fill area above line - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

Chart.js Line chart: Fill area above line

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from   w w  w.  j av a2 s  . c o m
    Chart.types.Line.extend({
        name: "LineAlt",
        draw: function () {
            Chart.types.Line.prototype.draw.apply(this, arguments);
            var ctx = this.chart.ctx;
            var scale = this.scale;
            ctx.save();
            ctx.fillStyle = this.datasets[0].fillColor;
            ctx.beginPath();
            ctx.moveTo(scale.calculateX(0), scale.calculateY(0))
            this.datasets[0].points.forEach(function (point) {
                ctx.lineTo(point.x, point.y);
            })
            ctx.closePath();
            ctx.fill();
            ctx.fillStyle = this.datasets[1].fillColor;
            ctx.beginPath();
            ctx.moveTo(scale.calculateX(0), scale.calculateY(0))
            this.datasets[1].points.forEach(function (point) {
                ctx.lineTo(point.x, point.y);
            })
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }
    });
    var chartData = {
        labels: ["9 /15 /15", "9 /28 /15", "10 /5 /15", "10 /13 /15", "10 /19 /15", "10 /30 /15", "11 /15 /15"],
        datasets: [
            {
                fillColor: "rgba(255, 52, 21, 0.2)",
                pointColor: "#da4e2C",
                strokeColor: "#da4e2C",
                data: [200000, 180000, 150000, 110000, 60000, 0, 0]
            },
            {
                fillColor: "rgba(52, 21, 255, 0.2)",
                strokeColor: "#1C57A8",
                pointColor: "#1C57A8",
                data: [-300000, -300000, -300000, -150000, -150000, -20000, 0]
            },
        ]
    }
    var ctx = document.getElementById("lineChart").getContext("2d");
    var myNewChart = new Chart(ctx).LineAlt(chartData, {
        bezierCurve: false,
        datasetFill: false
    });
    }

      </script> 
   </head> 
   <body> 
      <canvas id="lineChart" width="600" height="400"></canvas>  
   </body>
</html>

Related Tutorials