Chartjs-How can I display `Null` value data on Y Axis using the Primitive dataset format in Chart.js V3.7.0?

by

1👍

✅

You can define spanGaps: true on your dataset.

spanGaps: If true, lines will be drawn between points with no or null data.

For further details, consult the Line Styling section of the Chart.js documentation.

new Chart('chart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{
      data: [15, null, 13, 8, null, 9, 10],
      backgroundColor: 'rgba(255, 0, 0, 0.5)',
      borderColor: 'rgb(255, 0, 0)',
      tension: 0.2,
      spanGaps: true
    }],
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="chart"></canvas>

Leave a comment