JSFiddle - React, Tailwind, and code Playground

by Madan Bhandari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<canvas id="linechart"></canvas>

<div>
  <a id="current">Current</a>
  <a id="forecast">Forecast</a>
</div>

JavaScript

$(document).ready(function(){
        var canvas = document.getElementById('linechart');
        var ctx = canvas.getContext('2d');
        var current = [800, 1350, 1400, 1600, 2600, 3100];
        var forecast = [400, 1050, 1200, 1300, 1800, 2400];
        var data = {
          labels: ["2", "4", "8", "12", "16", "20"],
          pointDotRadius: 0,
          pointRadius: 0,
          pointBorderWidth : 0,
          pointHitRadius: 0,
          datasets: [
          {
            label: "current",
            fillColor: "rgba(220,220,220,0)",
            strokeColor: "#7bc775",
            pointColor: "#7bc775",
            data: current,
          },
          {
            label: "forecast",
            fillColor: "rgba(151,187,205,0)",
            strokeColor: "#fed477",
            pointColor: "#fed477",
            data: forecast,
          }]
        };
        var myLineChart = new Chart(ctx, {
          type: 'line',
          data: data
        });
        var step  = 800;
        var max   = 3200;
        var start = 0;
        window.myObjBar = new Chart(ctx).Line(data, {
          scaleOverride: true,
          scaleSteps: Math.ceil((max-start)/step),
          scaleStepWidth: step,
          scaleStartValue: start,
          responsive : true
        });
        $('#current').click(function(){
          current = [];
          if(myLineChart!== null){
            myLineChart.destroy();
            myLineChart = new Chart(ctx, {
              type: 'line',
              data: data
            });
          }
        });
      });