Chartjs Linechart标签位置错误

Question

我正在使用chartjs2，我在页面上有2个图表。第一个有条形图和折线图。标签在X轴上的位置很好。

但是对于图表2，我有2个折线图，标签处于错误的位置。我想为标签或线条添加一些填充。

这里的数字应该完全在点之下，所以我会把线图推到右边，因为它在第一张图片上。

更新：Fiddle example

var ctx = document.getElementById("compare");
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [1, 2, 3, 4],
    datasets: [
      {
        type: 'line',
        label: 'First',
        data: [0, 0, 0, 0, 0],
        fill: true,
        lineTension: 0.1,
        backgroundColor: "rgba(254, 241, 231, 0.6)",
        borderColor: "#ff6600",
        pointBackgroundColor: "#f76420",
        pointBorderColor: "#f5c09e",
        pointBorderWidth: 2,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "#f76420",
        pointHoverBorderColor: "#f5c09e",
        pointHoverBorderWidth: 2,
        pointRadius: 4,
        pointHitRadius: 10
      },
      {
        type: 'line',
        label: 'Second',
        data: [0, 8, 12, 6, 0],
        fill: true,
        lineTension: 0.1,
        backgroundColor: "rgba(224, 224, 224, 0.6)",
        borderColor: "#e0e0e0",
        pointBackgroundColor: "#e0e0e0",
        pointBorderColor: "#f5c09e",
        pointBorderWidth: 2,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "#f76420",
        pointHoverBorderColor: "#f5c09e",
        pointHoverBorderWidth: 2,
        pointRadius: 4,
        pointHitRadius: 10
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      mode: 'label'
    },
    scales: {
      yAxes: [{
        ticks: {
          max: 13,
          min: 0,
          stepSize: 4,
          fontColor: '#e0e0e0'
        }
      }],
      xAxes: [{
        gridLines: {
          display: false,
          drawBorder: false
        }
      }]
    }
  }
});