Different amount of label and data in Chart.js

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?

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);

Mixed · Chart.js documentation, to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset. var mixedChart = new Chart(ctx, { type: 'bar', data: { datasets: [{ label: 'Bar Dataset', data:  I would like to know if it's possible to specify different labels for multiple data set in pie chart in the 2.0 alpha 3 version. If not, is it a contribution that would be interesting for the p

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);

Labeling Axes, When creating a chart, you want to tell the viewer what data they are viewing. The scale label configuration is nested under the scale configuration in the sign in the ticks callback: function(value, index, values) { return '$' + value; } } }] } } });. Like I have two lines on the same plot. Of 10 possible dates, one of the lines only has data for 8 of those, and the other has data for all 10. When I plot them, the axis reads for all 10 and the line with 10 points plots correctly but the line with 8 data points plots on the left most 8 positions even though it should skip some earlier.

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

24 results matching "labels", 'line', // The data for our dataset data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', This works best if there is not a large variance in the size of your labels. If the options are mutated in place, other option properties would be. The label callback can change the text that displays for a given data point. A common example to round data values; the following example rounds the data to two decimal places. A common example to round data values; the following example rounds the data to two decimal places.

Updating Charts · Chart.js documentation, Adding and removing data is supported by changing the data array. function addData(chart, label, data) { chart.data.labels.push(label); chart.data.datasets. If the options are mutated in place, other option properties would be preserved,  Overview. Highly customizable Chart.js plugin that displays labels on data for any type of charts.. Requires Chart.js 2.7.0 or later.. Documentation. Introduction; Getting Started

Legend · Chart.js documentation, Items passed to the legend onClick function are the ones returned from labels. border lineWidth: number, // Stroke style of the legend box strokeStyle: Color, '​bar', data: data, options: { legend: { display: true, labels: { fontColor: 'rgb(255, 99, It can be common to want to trigger different behaviour when clicking an item in​  Stack Overflow Public how to display data values on Chart.js. Ask Question Also does not process collisions on combined charts and cumulative data labels for

Line · Chart.js documentation, var myLineChart = new Chart(ctx, { type: 'line', data: data, options: options }); The line chart allows a number of properties to be specified for each dataset. label, The label for the dataset which appears in the legend and tooltips. weighted cubic interpolation, which produces pleasant curves for all types of datasets. I am trying to create a multiline chart using Chart.js I can do this for 1 line and i can do 2 lines using a fixed data structure but I cannot get multiple lines to display data passed to the data