对齐混合图表中的线条和条形

Question

我正在制作一张混合图表，我需要在条形图上绘制一个阶梯线图。我的线图中的数据点默认情况下在条形图中间对齐，如下所示：

我想让行的开头与条的开头对齐，如下所示：

我已经浏览过Chartjs的文档，但是我无法找到一种方法让我的栏开头就行。

我设置了一个小例子来进一步解释我的问题：

var opc = $("#chart");
var myChart = new Chart(opc, {
  type: 'bar',
  data: {
    labels: ['Item 1', 'Item 2', 'Item 3'],
    datasets: [{
      type: 'bar',
      label: 'Bar Component',
      data: [10, 20, 30],
    }, {
      type: 'line',
      steppedLine: true,
      label: 'Line Component',
      data: [25, 5, 20],
      fill: false
    }]
  },
  options: {
    scales: {
      yAxes: [{
        display: true,
        ticks: {
          suggestedMin: 0, // minimum will be 0, unless there is a lower value.
          // OR //
          beginAtZero: true // minimum value will be 0.
        }
      }]
    }
  }
});

以下是工作小提琴的链接：https://jsfiddle.net/7yheenc6/1/