Chartjs-How to align bars in bar chart – Chart.js

by

1👍

You could add some fake entries into data.labels.

data: {
  labels: ["A", "", "", ""],

Please have a look at below runnable code snippet.

new Chart("chart", {
  type: "bar",
  data: {
    labels: ["A", "", "", ""],
    datasets: [{
      label: "My Dataset",
      data: [1],
      backgroundColor: "rgba(255, 99, 132, 0.2)",
      borderColor: "rgb(255, 99, 132)",
      borderWidth: 1
    }]
  },
  options: {
    scales: {    
      yAxes: [{
        ticks: {
          min: 0,
          max: 1,
          stepSize: 1
        },
        gridLines: {
          drawOnChartArea: false
        }
      }],
      xAxes: [{
        gridLines: {
          drawOnChartArea: false
        }
      }]
    }
  }
});
canvas {
  max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="200"></canvas>

Leave a comment