[Chartjs]-Skip labels when associated value is null in chartJS

by

1👍

✅

Check my answer here. You can simplify it:

var labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"];
var data = [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.

0👍

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

<!DOCTYPE HTML>
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
</head>

<body>

    <canvas id="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 = new Chart(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>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
</head>

<body>

    <canvas id="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 = new Chart(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);
            } else if (obj.datasets[0].data.length < 2) {
                break;
            } else {
                i++;
            }

        }

        myChart.update();


    </script>

</body>

</html>

0👍

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 = 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