[Chartjs]-How to center bars on x-axis of Chart.js bar graph?

by

1👍

✅

The default behavior of chart.js is to center charts, Looking at the picture I am doubting that you have supplied two values in the labels array of data (Not sure) if that’s not the case please see this fiddle (http://jsfiddle.net/m5rq6bdj/2/) or the below code, which may help.

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {    
    datasets: [{
          label: 'Blueberries',
          data: [2],
          borderColor: 'blue',
          fill: false,
          lineTension: 0,
          borderDash: [10,5]
        }, {
          label: 'Apples',
          data: [1],
          borderColor: 'red',
          fill: false,
          lineTension: 0.1
        }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        display: false,
        ticks: {
          scaleBeginAtZero: false
        }
      }],
      yAxes: [{
        display: true,
        ticks: {
          beginAtZero: true,
          fontSize: 12,
          fontFamily: 'Lato, sans-serif'
        },
        scaleLabel: {
          display: true,
          labelString: 'Fruits Counted',
          fontStyle: 'bold',
          fontFamily: 'Lato, sans-serif'
        }
      }]
    },
    legend: {
      display: true,
      position: 'bottom',
      labels: {
        fontColor: '#333',
        fontFamily: 'Lato, sans-serif',
      }
    }
  }
});

Leave a comment