Chartjs条形图字符样式对齐中心

Question

var barChartData = {
  datasets: [{
      label: "Mastercard",
      backgroundColor: "lightblue",
      borderColor: "blue",
      borderWidth: 1,
      data: [4, 7, 3, 6, 0, 10, 4, 6]
    },
    {
      label: "Visa",
      backgroundColor: "yellow",
      borderColor: "orange",
      borderWidth: 1,
      data: [6, 9, 7, 3, 10, 0, 4, 6]
    }
  ]
};

var chartOptions = {
  responsive: true,
  legend: {
    position: "top"
  },
  title: {
    display: true,
    text: "Chart.js Bar Chart"
  },
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
};

new Chart(document.getElementById('myChart'), { 
  type: "bar",
  data: barChartData,
  options: chartOptions
});

canvas {
  max-width: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> 
<canvas id="myChart" width="2" height="3"></canvas>

黄色和蓝色条可以居中对齐吗？或如何将我的代码修改为自动宽度？ 我不知道这个问题。 或更好的方式来修改我的代码