JSFiddle - React, Tailwind, and code Playground

by Seetpal Singh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="chart"></canvas>

JavaScript

const ctx = document.getElementById('chart').getContext('2d');
const data = [10, -20, 40, -30, 0, 55, -60];
const colours = data.map((value) => value < 0 ? 'red' : 'green');

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: 'Global newspaper circulation',
      data: dataSet,
      fill: {
        target: 'origin',
        below: '#D6664F',    // And blue below the origin
        above: '#2d9bb1',   // Area will be red above the origin
      },
      borderColor: 'lightgrey',
      backgroundColor: 'rgb(162, 216, 226 , 75%)',
      radius: 1,
      //pointBorderColor: coloursOuter,
      //pointBackgroundColor: colours,
      pointBorderColor: 'green',
      pointBackgroundColor: '#2d9bb1',
    }]
  },
  options: {
    legend: {
    	display: false
    }
  }
})