Chartjs-Display all labels on X axis in Chart.js regardless of whether there is data or not

by

0👍

You can define data.labels and make sure that data.datasets.data has the same number of entries, null for missing values.

let config = {
  type: "bar",
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "october", "November", "December"],
    datasets: [{
      label: "cost of goods sold",
      data: [0, 20, 40, 50, null, null, null, null, null, null, null, null]
    }]
  }
};

new Chart('chart', config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart" height="80"></canvas>

Leave a comment