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>
<canvas id="canvas" width="600" height="300"></canvas>

JavaScript

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 = '#000';
      ctx.shadowBlur = 16;
      ctx.shadowOffsetX = 2;
      ctx.shadowOffsetY = 20;
      originalStroke.apply(this, arguments)
      ctx.restore();
    }
  }
});

var data = {
  labels: ["January", "February", "March", "April", "May"],
  datasets: [
    {
      label: "My First dataset",
      fillColor: "#26C7E4",
      strokeColor: "#26C7E4",
      pointColor: "#26C7E4",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
      data: [40,60,50,65,70]
    }
  ]
};

var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx).LineAlt(data, {
  datasetFill: false
});