如何从chart.js 中的折线图底部删除多余的空格？

Question

正如您在下面突出显示的画布元素所见，x 轴标签下方有相当多的空白。如果我调整画布的大小，空白与它的高度成正比。是否有任何设置可以控制此空白？我已经排除了填充并且没有看到任何边距设置。

谢谢！

这是呈现图表的 JavaScript：

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  options: {
    legend: {
      display: false
    },
    elements: {
      point: {
        radius: 0
      }
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
          drawBorder: true
        },
        ticks: {
          autoSkip: true,
          maxTicksLimit: 1
        }
      }],
      yAxes: [{
        gridLines: {
          display: true,
          drawBorder: false
        },
        ticks: {
          callback: function(value, index, values) {
            return '$' + addCommas(value);
          }
        }
      }]
    },
    layout: {
      padding: 5
    }
  },
  type: 'line',
  data: {
    labels: labels,
    datasets: [
      { 
        data: values,
        fill: false,
        borderColor: "blue"
      }
    ]
  }
});

以及完整的 jsfiddle：https ://jsfiddle.net/rsn288fh/2/

Answer 1

我知道你说你排除了填充，但这是我能看到的唯一选项：

options: {
    layout: {
        padding: {
            bottom: -20
        }
    }
}

很明显，你可以玩-20适合你的东西。

下面是用于填充参考了chartjs，如果你想看到更多的

编辑：

我已经更新了你的jsfiddle，图表下方有一个彩色的 div 。当您调整大小时，它似乎停留在图表下方的同一位置。