Chartjs-Remove white space in ChartJS when value is null

by

2👍

✅

What you consider a whites space at the left of your example is actually an invisible bar of value 1. This can be solved by defining option yAxes.ticks.beginAtZero: true or alternatively also yAxes.ticks.min: 0.

yAxes: [{
  ticks: {
    beginAtZero: true
  }
}],

In case you want to remove leading null entries from your data, this can be done as follows. The Array.shift() method removes the first element from an array.

while(data[0] == null) {
  data.shift(); // remove leading null  
  labels.shift(); // remove corresponding label
}

To also remove the tailing null entries from your data, you can proceed as follows. The Array.pop() method removes the last element from an array.

while(data[data.length-1] == null) { 
  data.pop(); // remove tailing null 
  labels.pop(); // remove corresponding label
}

The important thing is to always also remove the corresponding entry from labels, each time you remove an entry from data.

Please have a look at your amended code below.

const labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const data = [1, 2, 3, 4, 5, 6, null, 5, null, null, null, null];

while(data[0] == null) {
  data.shift(); // remove leading null  
  labels.shift(); // remove corresponding label
}

while(data[data.length-1] == null) { 
  data.pop(); // remove tailing null 
  labels.pop(); // remove corresponding label
}

var myChart = new Chart('myChart', {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: 'Exceptionnel',
      data: data
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        offset: true,
        gridLines: {
          display: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Leave a comment