Chartjs-How to create a chart where some labels don't have a value in ChartJS?

by

1👍

✅

have you tried using the spanGaps option ?
If you don’t set any Y value, except where progresses were made, there should be gaps between your points. Using this, according to chartjs documentation, it should draw lines between points with data, such as:

var ctx = document.getElementById('myCanva').getContext('2d');

var config = {
  type:'line',
  data:{
    labels:[0,1,2,3,4,5,6,7,8,9],
    datasets:[{
      data:[1,2,5,null,9,null,null,15,null,20],
      label:'A'
    }]
  },
  options:{
    spanGaps:false,
  }
} 

var myChart = new Chart(ctx, config)


function spanGapsBtn(){
  config.options.spanGaps = !config.options.spanGaps
  myChart.update()
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"></script>
<canvas id="myCanva"></canvas>
<button onClick = "spanGapsBtn()">Enable/Disable span Gaps</button>

Leave a comment