Different amount of label and data in Chart.js

Question

I'm trying to generate a chart that might not have the same amount of data and labels.

For example, I have a label for each month, but maybe for the month of March or August I do not have a value.

I tried with the following code:

var options = {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
    datasets: [{
      label: 'Test',
      backgroundColor: 'red',
      data: [{
        'x': 'Apr',
        'y': 40
      }, {
        'x': 'July',
        'y': 70
      }, {
        'x': 'Dec',
        'y': 120
      }]
    }]
  },
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'My Test'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
}

var ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, options);

But it displays the value in the wrong position as it is in the image.

How can I fix this?

Ana Liza Pandac · Accepted Answer · 2018-12-28T10:39:29.807

But it displays the value in the wrong position as it is in the image

That's because the indexes of the data you provided corresponds to the first 3 values of your labels.

Solution #1:

To resolve this, you have the even out the length of the labels to the length of your data set by providing placeholder values for the lacking points in your data.

Do not use zeros as placeholder for non-existent values in your dataset if you don't want Chartjs to display the chart data in this manner. [See the short grayed-out areas indicating the zero values.]

So the better way to handle this is to provide null values instead. See working example below.

const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const data = [{'x':'Apr', 'y':40},{'x':'July', 'y':70},{'x':'Dec', 'y':120}];

const filledMonths = data.map((month) => month.x);
const dataset = labels.map(month => {
  const indexOfFilledData = filledMonths.indexOf(month);
 if( indexOfFilledData!== -1) return data[indexOfFilledData].y;
  return null;
});
console.log(dataset);

Solution #2: In Chartjs > 2.x you can use time scale

If you have a lot of data and don't want to usey placeholder values for your missing data then you set your xAxes scale type as time in your chart options.

Here's an answer using this implementation.

score 0 · Answer 2 · answered Dec 12 '18 at 10:12

If you don't have any value for any month, provide 0 as data for the same.

var options = {
            type: 'bar',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
                datasets:[
                    {
                        label: 'Test',
                        backgroundColor: 'red',
                        data: [0,0,0,40,0,0,70,0,0,0,0,120]
                    }
                ]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'My Test'
                },
                scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
            }
        }
var ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, options);

score -2 · Answer 3 · answered Dec 12 '18 at 10:22

-2

Chart.js supports all of the formats that Moment.js accepts ('MMM YYYY'). Just adding the year should do the trick.

answered Dec 12 '18 at 10:22

raphaelSeguin

449
3
12

Different amount of label and data in Chart.js

3 Answers3