javascriptchart.js

Display all labels in Chart.js

I have a problem with the graphics of CHART.JS. When I put the time interval of 2 years, some labels of the months overlap. I want all the labels to appear, the time interval doesn't matter.

var g = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labelsHeader,
        datasets: listData,
    },
    options:{
        maintainAspectRatio: false,
    }
});

enter image description here

Solution

  • Add the following under options:

    options: {
  scaleShowValues: true,
  scales: {
    xAxes: [{
      ticks: {
        autoSkip: false
      }
    }]
  }
}

    Edit (2024): The scale configuration has changed in the newer versions. Now, it looks like the following:

    options: {
  scales: {
    x: {
      ticks: {
        display: true,
        autoSkip: false
      }
    }
  }
}