Chartjs-Chart.js V3 Fill Below 0

by

0👍

✅

You can use a custom inline plugin for this:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [100, 19, 3, 5, -10, 3],
        borderColor: 'red',
        backgroundColor: 'red'
      },
      {
        label: '# of Votes2',
        data: [20, 10, 4, 3, -30, 32],
        borderColor: 'blue',
        backgroundColor: 'blue'
      }
    ]
  },
  options: {
    plugins: {
      backgrounds: {
        hbars: [{
          from: 0,
          to: 'MIN',
          color: "rgb(230, 195, 195)"
        }]
      }
    }
  },
  plugins: [{
    id: 'backgrounds',
    beforeDraw: (chart, args, options) => {
      const {
        canvas,
        ctx,
        chartArea,
        scales: {
          y
        }
      } = chart;
      let from = 0;
      let to = 0;

      options.hbars.forEach((hBar) => {
        from = hBar.from;
        to = hBar.to;

        from = from === 'MIN' ? y.min : from;
        from = from === 'MAX' ? y.max : from;

        to = to === 'MIN' ? y.min : to;
        to = to === 'MAX' ? y.max : to;

        ctx.save(canvas.width, canvas.height);
        ctx.fillStyle = hBar.color;
        ctx.fillRect(chartArea.left, y.getPixelForValue(from), chartArea.right - chartArea.left, y.getPixelForValue(to) - y.getPixelForValue(hBar.from));
        ctx.restore();
      })
    }
  }]
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>

Leave a comment