JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<canvas id="salesData"></canvas>

CSS

body {
    background: #202B33;
}

JavaScript

// Line Chart
var ctx = document.getElementById("salesData").getContext("2d");

var gradient = ctx.createLinearGradient(0,0,700,0);
    gradient.addColorStop(0, 'rgba(255, 204, 128, 1)');   
    gradient.addColorStop(0.5, 'rgba(255, 152, 0, 1)');
    gradient.addColorStop(1, 'rgba(239, 108, 0, 1)');

var salesData = {
  labels: ["1", "2", "3", "4", "5", "6", "7", "8"],
  datasets: [
    {
      label: "Front",
      fillColor: "rgba(0, 0, 0, 0)",
      strokeColor: gradient,
      pointColor: gradient,
      pointStrokeColor: "#202b33",
      pointHighlightStroke: "rgba(225,225,225,0.9)",
      data: [6, 10, 40, 48, 55, 64, 55, 72]
    }
  ]
};


window.myLineChart = new Chart(ctx).Line(salesData, {
  pointDotRadius : 0,
  pointDotStrokeWidth : 0,
  datasetStrokeWidth : 4,
  scaleShowVerticalLines: true,
  scaleGridLineWidth : 2,
  scaleShowGridLines : true,
  scaleGridLineColor : "rgba(225, 255, 255, 0.02)",


  responsive: true

});