JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<canvas id="lineChart" width="600" height="400"></canvas>

JavaScript

Chart.defaults.plugins = Chart.defaults.plugins || {};
Chart.defaults.plugins.filler = {};

// Helpers to move in core.canvasHelpers
function lineTo(ctx, p0, p1, invert) {
	if (p1.steppedLine === true) {
    ctx.lineTo(p1.x, p0.y);
    ctx.lineTo(p1.x, p1.y);
  } else if (p1.tension === 0) {
  	ctx.lineTo(p1.x, p1.y);
  } else {
		ctx.bezierCurveTo(
      invert? p0.controlPointPreviousX : p0.controlPointNextX,
      invert? p0.controlPointPreviousY : p0.controlPointNextY,
      invert? p1.controlPointNextX : p1.controlPointPreviousX,
      invert? p1.controlPointNextY : p1.controlPointPreviousY,
      p1.x,
      p1.y
    );
  }
}

Chart.plugins.register({
	id: 'filler',

	afterDatasetsDraw: function(chart) {
    var options = chart.config.options.plugins.filler;
    var datasets = chart.data.datasets;
    var ctx = chart.chart.ctx;

    (options.areas || []).forEach(function(area) {
    	var md0 = chart.getDatasetMeta(area.from) || {};
    	var md1 = chart.getDatasetMeta(area.to) || {};
      if (md0.type !== 'line' || md1.type !== 'line') {
      	return;
      }

			var line0 = md0.dataset;
      var line1 = md1.dataset;
      var points0 = line0._children;
      var points1 = line1._children;
      var count = Math.min(points0.length, points1.length);
      if (!count) {
      	return;
      }

			ctx.fillStyle = area.backgroundColor || line0._view.backgroundColor;

      var p00, p01, p10, p11;
      for (var i=0; i<count-1; ++i) {
      	p00 = points0[i]._view;
      	p01 = points0[i+1]._view;
      	p10 = points1[i]._view;
      	p11 = points1[i+1]._view;

	 			ctx.beginPath();
        ctx.moveTo(p00.x, p00.y);
        lineTo(ctx, p00, p01);
        ctx.lineTo(p11.x, p11.y);
        lineTo(ctx, p11, p10, true);
        ctx.closePath();
        ctx.fill();
      }
    });
  }
});

var datasets = [{
  backgroundColor: 'rgba(255, 99, 132, 0.2)',
  label: 'first',
  fill: false,
}, {
  backgroundColor: '#ccc',
  label: 'second',
  fill: false,
}, {
  label:...