JSFiddle - React, Tailwind, and code Playground

by Regisc

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.js"></script>
<div>
  <canvas id="graph" width="300" height="200"></canvas>
</div>

JavaScript

var linePrototypeDraw = Chart.controllers.line.prototype.draw;
Chart.controllers.lineWithArea = Chart.helpers.extend(Chart.controllers.line.prototype, {
  draw: function() {
    // do the usual for Line
    linePrototypeDraw.apply(this, arguments);

    // get the canva context
    var ctx = this.chart.chart.ctx;

    // save current state
    ctx.save();

    // draw the area if the serie uses poin style "area"
    var chartArea = this.chart.chartArea;
    var dataset = this.getDataset();
    var meta = this.getMeta();
    if (dataset.pointStyle === "area") {
      ctx.fillStyle = dataset.backgroundColor;

      // look for the first "X" (NB: the view uses X ↔ and Y ↕)
      var firstX = chartArea.left;
      meta.data.forEach(function(point, index) {
        if (isNaN(dataset.data[index])) {
          return true; // continue
        }
        if (firstX === chartArea.left) {
          firstX = point._view.x;
        } else {
          firstX = Math.min(point._view.x, firstX);
        }
      });

      // start the polygon
      ctx.beginPath();
      ctx.moveTo(firstX, chartArea.bottom);
      var lastX = firstX;
      meta.data.forEach(function(point, index) {
        // if we get a NaN then there is a hole
        if (isNaN(dataset.data[index])) {
          // close and fill the existing polygon
          ctx.lineTo(lastX, chartArea.bottom);
          ctx.closePath();
          ctx.fill();
          // start a new polygon
          ctx.beginPath();
          ctx.moveTo(point._view.x, chartArea.bottom);
          return true; // continue
        }
        // add the curren point to the polygon
        ctx.lineTo(point._view.x, point._view.y);
        lastX = point._view.x;
      });
      // close and fill the polygon
      ctx.lineTo(lastX, chartArea.bottom);
      ctx.closePath();
      ctx.fill();
    }

    // restore saved context
    ctx.restore();
  }
});

var graphObj = {
  "histo": true,
  "type": "lineWithArea",
  "data": {
    "labels":...