JSFiddle - React, Tailwind, and code Playground

by Seetpal Singh

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<body>
  <div id="chartWrapper">
    <canvas id="areaChartContainer" width="600" height="400"></canvas>
  </div>
</body>

CSS

#chartWrapper {
  word-wrap:break-all;
  max-width: 100%;
  border: 1px solid grey;
  padding: 10px;
  border-radius: 4px;
}

canvas {
  background-color: #eee;
}

JavaScript

var dataSet = [-0.2, -0.5, -2.7, -13, 12.3, -1.4, -1.9, -2.2];
    var colours = dataSet.map((value) => value < 0 ? '#D6664F' : '#2d9bb1');
    var coloursOuter = dataSet.map((value) => value < 0 ? 'lightgrey' : 'green');

    var data = [{
      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',
    }];

    const plugin = {
      id: 'custom_canvas_background_color',
      beforeDraw: (chart) => {
        const ctx = chart.canvas.getContext('2d');
        ctx.save();
        ctx.globalCompositeOperation = 'destination-over';
        ctx.fillStyle = 'white';
        var chartHeight = Math.max(chart.height, 400);
        ctx.fillRect(0, 0, chart.width, chartHeight);
        ctx.restore();
      }
    };
//To create some padding at bottom of legend
const legendMargin = {
  id: 'legendMargin',
  beforeInit(chart, legend, options) {
    // console.log(chart.legend.fit)
    const fitValue = chart.legend.fit;

    chart.legend.fit = function fit() {
      fitValue.bind(chart.legend)();
      return this.height += 20
    }
  }
};

    const options = {
      type: 'line',
  		plugins: [legendMargin, plugin],
      data: {
        labels: ['2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
        datasets: data
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          tooltip: {
            callbacks: {
              label: function (context) {
                var label = context.dataset.label || '';

                if (label) {
                  label += ': ';
           ...