Skip to content Skip to sidebar Skip to footer
Home / Chart.js / Javascript

Skip Labels When Associated Value Is Null In Chartjs

Post a Comment
If I have 12 labels on a chart (one for each month), how can I just show the first 6 if other values are null ? I use max: 'Jun'for the moment but I'd like to automate this: when '

Solution 1:

Check my answer here. You can simplify it:

var labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"];
vardata = [5, 6, 4, null, 5, null];
for (let i = 0; i <= data.length; i++){
    if (data[i] === null) {
        data.splice(i, 1);
        labels.splice(i, 1);
        i--;
    }
}

However, if you are sure that once you reach a null value the rest are also null, you can splice not just one but the remaining as well. The trick is to also remove the labels so that no empty data is shown.

PS: I would advise not fetching labels with empty data from your back end if possible.

Solution 2:

You can skip labels which have null values by checking in the callback of ticks like this.

<!DOCTYPE HTML><html><head><scriptsrc="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script></head><body><canvasid="myChart"width="200"height="200"></canvas><script>var ctx = document.getElementById('myChart').getContext('2d');

        let obj = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            datasets: [{
                spangaps: true,
                label: 'Exceptionnel',
                data: [1, 2, 3, 4, 5, 6, null, 5, null, null, null, null]
            }]
        };

        var myChart = newChart(ctx, {
            type: 'bar',
            data: obj,
            options: {
                scales: {
                    xAxes: [{
                        offset: true,
                        gridLines: {
                            display: true
                        },
                        ticks: {

                            callback: function (value, index, values) {

                                var dataValue = obj.datasets[0].data;

                                if (dataValue[index]) {
                                    return values[index];
                                }

                            }
                        }
                    }]
                }
            }
        });


    </script></body></html>

If you would like to remove spaces which are null in values and don't want to show this then use this code:

<!DOCTYPE HTML><html><head><scriptsrc="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script></head><body><canvasid="myChart"width="200"height="200"></canvas><script>var ctx = document.getElementById('myChart').getContext('2d');

        let obj = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            datasets: [{
                spangaps: true,
                label: 'Exceptionnel',
                data: [1, 2, 3, 4, 5, 6, null, 5, null, null, null, 3]
            }]
        };

        var myChart = newChart(ctx, {
            type: 'bar',
            data: obj,
            options: {
                scales: {
                    xAxes: [{
                        offset: true,
                        gridLines: {
                            display: true
                        }
                    }]
                }
            }
        });

        var len = obj.datasets[0].data.length;

        for (var i = 0; i < len;) {

            if (obj.datasets[0].data[i] === null) {
                obj.datasets[0].data.splice(i, 1);
                obj.labels.splice(i, 1);
            } elseif (obj.datasets[0].data.length < 2) {
                break;
            } else {
                i++;
            }

        }

        myChart.update();


    </script></body></html>

Solution 3:

In order to remove 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.

In case you also wanted 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
}

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 = newChart('myChart', {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: 'Exceptionnel',
      data: data
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        offset: true,
        gridLines: {
          display: true
        }
      }]
    }
  }
});
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><canvasid="myChart"height="90"></canvas>

Post a Comment for "Skip Labels When Associated Value Is Null In Chartjs"