JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

<div class="yearly-revenue-chart">
    <canvas id="lastYearRevenue" class="firstShadow" width="600" height="300"></canvas>
    <canvas id="thisYearRevenue" width="600" height="300"></canvas>
</div>

CSS

.yearly-revenue-chart {
    position: relative;
}
.yearly-revenue-chart canvas.firstShadow {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

JavaScript

var thisYearCTX = document.getElementById("thisYearRevenue").getContext("2d");
var lastYearCTX = document.getElementById("lastYearRevenue").getContext("2d");

Chart.types.Line.extend({
  name: "LineAlt",
  initialize: function () {
    Chart.types.Line.prototype.initialize.apply(this, arguments);

    var ctx = this.chart.ctx;
    var originalStroke = ctx.stroke;
    ctx.stroke = function () {
      ctx.save();
      ctx.shadowColor = 'rgba(156, 46, 157,0.3)';
      ctx.shadowBlur = 20;
      ctx.shadowOffsetX = 2;
      ctx.shadowOffsetY = 20;
      originalStroke.apply(this, arguments)
      ctx.restore();
    }
  }
});

Chart.types.Line.extend({
  name: "LineAlt2",
  initialize: function () {
    Chart.types.Line.prototype.initialize.apply(this, arguments);
    var ctx = this.chart.ctx;
    var originalStroke = ctx.stroke;
    ctx.stroke = function () {
      ctx.save();      
      originalStroke.apply(this, arguments)
      ctx.restore();
    }
  }
});

var thisYearData = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [
    {
      label: "This year dataset",
      fillColor: "#9c2e9d",
      strokeColor: "#9c2e9d",      
      pointColor: "transparent",
      pointStrokeColor: "transparent",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "#9c2e9d",
      data: [22,62,15,78,58,98]
    }
  ]
};

var lastYearData = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [
    {
      label: "Last year dataset",
      fillColor: "#e4e4e4",
      strokeColor: "#e4e4e4",      
      pointColor: "transparent",
      pointStrokeColor: "transparent",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "#e4e4e4",
      data: [12,6,35,58,38,68]
    }
  ]
};
var thisYearChart = new Chart(thisYearCTX).LineAlt(thisYearData, {
  datasetFill: false,
  scaleShowVerticalLines: false,
  datasetStrokeWidth: 5,  
  scaleFontColor: '#9e9e9e',
  scaleGridLineColor: '#e4e4e4',
  scaleLineColor:...