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

Question

I have a really simple Chart.js bar graph where I'm not labeling the x-axis. It looks something like this:

I want my bars to be centered along the x-axis instead of left-aligned as is shown in the pic above. Any ideas? Here's what my data looks like:

        datasets: [{
          label: 'Blueberries',
          data: [this.get('fruit').bluebs[0]],
          borderColor: 'blue',
          fill: false,
          lineTension: 0,
          borderDash: [10,5]
        }, {
          label: 'Apples',
          data: [this.get('fruit').apples[1]],
          borderColor: 'red',
          fill: false,
          lineTension: 0.1
        }]

And here is my config:

    return {
      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',
        }
      }
    };

Also would love it if the person who downvoted me would tell me why so I can actually take action on it. :/

Answer 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',
      }
    }
  }
});