ChartJS：是否可以省略最后一条网格线以节省空间

【问题标题】：ChartJS: Is it possible to omit last grid line to save spaceChartJS：是否可以省略最后一条网格线以节省空间
【发布时间】：2021-11-11 11:30:06
【问题描述】：

我正在尝试实现下图中显示的行为（使用另一个库渲染），其中省略了 y 轴上的最后一条网格线，以避免图表中多余的空白空间。在这种情况下，ChartJS 似乎坚持在值 50 处包含网格线。我尝试使用axis.ticks.max 设置，并尝试通过滴答声回调省略滴答声，但都没有达到预期的效果。注意：我希望有一个 ChartJS 选择刻度和范围的解决方案，而不是我必须手动设置它们的解决方案。（顺便说一句，我通过 Angular 的 ng2-charts 包装器使用 ChartJS）。

【问题讨论】：

标签： chart.js ng2-charts

【解决方案1】：

您可能需要定义一组options 才能获得所需的结果。

scales.y.max
scales.y.ticks.callback
scales.y.grid.color

请看下面的可运行代码，看看它是如何完成的。

new Chart("chart", {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My Dataset",
      data: [5, 22, 34, 31, 42, 28, 45]
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        max: 46,
        ticks: {          
          stepSize: 10,
          callback: v => v > 40 ? '' : v
        },
        grid: {
          drawBorder: false,
          color: ctx => ctx.tick.value > 40 ? '#FFF' : '#DDD' 
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="chart"></canvas>

【讨论】：