Chartjs线图只有一点 - 如何居中

我有一张chartjs折线图,显示了不同产品在一系列日期的销售情况.用户可以选择日期范围(例如从2015-12-01到2015-12-10)来查看每天的销售情况,这很好并且可以正常工作.

但是如果用户只选择一天(范围从例如2015-12-01到2015-12-01),他会得到正确的图表,但看起来不太好:

如您所见,这些点都贴在y轴上.是否有可能将图中的点居中？

这应该是什么样子:

您可以检查标签(或数据)数组的长度,并使用空字符串标签和空值向左和向右添加虚拟不可渲染点,如此

var chartData = {
  labels: ['', "A", ''],
  datasets: [
    {
      fillColor: "rgba(255, 52, 21, 0.2)",
      pointColor: "#da3e2f",
      strokeColor: "#da3e2f",
      data: [null, 20, null]
    },
    {
      fillColor: "rgba(52, 21, 255, 0.2)",
      strokeColor: "#1C57A8",
      pointColor: "#1C57A8",
      data: [null, 30, null]
    },
  ]
}

小提琴 - https://jsfiddle.net/pf24vg16/