JSFiddle - React, Tailwind, and code Playground

by Seetpal Singh

HTML

<script src="https://github.com/chartjs/Chart.js/releases/download/v2.5.0/Chart.min.js"></script>
<canvas id="chart"></canvas>

JavaScript

const ctx = document.getElementById('chart').getContext('2d');
const data = [-10, 20, -40, 30, -100, 55,60, -15];

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
    	fill: 'origin',
      label: "My First dataset",
			borderColor: 'black',
      data: data,
    }]
  },
  options: {
    legend: {
    	display: false
    }
  },
   plugins: [{
        beforeRender: function (x, options) {
        		var c = x.chart
            var dataset = x.data.datasets[0];
            var yScale = x.scales['y-axis-0'];
            var yPos = yScale.getPixelForValue(0);

            var gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height);
            gradientFill.addColorStop(0, 'green');
            gradientFill.addColorStop(yPos / c.height - 0.01, 'green');
            gradientFill.addColorStop(yPos / c.height + 0.01, 'red');
            gradientFill.addColorStop(1, 'red');

            var model = x.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].dataset._model;
            model.backgroundColor = gradientFill;
        }
    }]
})