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: 'daily print news 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.5,
  //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 += ': ';
                }
                if (context.parsed.y !== null) {
                  return label + context.parsed.y +...