如何在chart.js中使用“主要”刻度线？

Question

我正在使用chart.js构建图表。这是一个小提琴： https://jsfiddle.net/jakerobb/ynq7xu6L/43/

是这样的：

我已将其配置为显示主要刻度，但均未显示。我已经尝试了很多东西。我将其配置为以蓝色显示次要刻度标签，以红色显示主刻度，以便在工作时超级明显，但无济于事。根据我的配置，我希望16、18和20标签会显示为红色。

相关的配置代码段（请参见小提琴）：

options: {
  scales: {
    xAxes: [{
      type: 'linear',
      ticks: {
        beginAtZero: false,
        ...
        major: {
          enabled: true,
          stepSize: 2.0,
          padding: 10,
          fontSize: '12pt',
          fontColor: 'red'
        }
      }
    }],
    yAxes: [{
      ...
    }]
  },

我在做什么错了？

另外，请注意：

• 我无法用线性X轴将数据呈现为条形。小提琴实现了here所示的解决方案；它没有用（将JS第3行的类型从scatter更改为bar）。
• 调整窗口大小时，每个调整大小事件都会导致图表的高度递增。这将永远持续下去，超出页面底部。您可以通过调整小提琴窗口的大小或移动其分隔条来演示这一点。在不同的上下文中，我也看到这也发生在x轴上。我希望图表始终完全填充其容器的高度和宽度。我可以使用CSS max-height和max-width来限制增长，但是我不想使用硬编码的最大值。
• 据我所知，除非我提供的字体自然是 粗体（我根本不愿意这样做?），否则无法将主要刻度标记标签显示为粗体。我之所以这样说，是因为我希望我做错了，特此邀请某人与我矛盾。