ChartJS 3.8.2：如何强制图表缩小时Y轴保持stepSize为5

问题描述 #

我尝试为ChartJS 3.8.2的Y轴强制设置stepSize为5，但当图表因浏览器窗口缩放等原因缩小时，Y轴刻度的stepSize会变为15。如何确保无论画布尺寸如何，Y轴都保持stepSize为5？

当前配置如下：

options: {
    scales: {
        y: {
            grid: {
                color: ({ tick }) => tick.value == 0 ? 'black' : Chart.defaults.borderColor
            },
            min: -60,
            ticks: {
                stepSize: 5, // 仅在图表足够大时生效
                display: true
            }
        }
    },
    layout: {
        padding: {
            right: 10,
            top: 10,
        }
    }
}

实际缩放后Y轴刻度的stepSize变为15。

解决方法 #

ChartJS默认会自动跳过部分刻度（autoSkip默认开启），避免刻度标签重叠。要强制固定stepSize，需要禁用自动跳过功能，并设置足够大的最大刻度数量，确保所有按stepSize生成的刻度都能显示：

修改后的配置如下：

options: {
    scales: {
        y: {
            grid: {
                color: ({ tick }) => tick.value == 0 ? 'black' : Chart.defaults.borderColor
            },
            min: -60,
            // 建议同时设置max，避免ChartJS自动计算最大值时影响刻度生成
            max: 0, // 根据你的数据调整，比如如果数据上限是0就设0，按需修改
            ticks: {
                stepSize: 5,
                display: true,
                autoSkip: false, // 禁用自动跳过刻度
                maxTicksLimit: 100 // 设置足够大的数值，确保所有刻度都能显示
            }
        }
    },
    layout: {
        padding: {
            right: 10,
            top: 10,
        }
    }
}

关键配置说明 #

• autoSkip: false：关闭ChartJS的自动刻度跳过逻辑，强制显示所有按stepSize计算出的刻度。
• maxTicksLimit: 100：设置一个远大于实际需要的刻度数量上限（比如从-60到0，stepSize为5的话，总共有13个刻度，设100足够），防止ChartJS因限制最大刻度数而合并刻度。
• 可选：设置max：如果没有明确设置Y轴最大值，ChartJS可能会根据数据自动调整，配合min一起设置可以让刻度范围固定，进一步确保stepSize生效。

内容的提问来源于stack exchange，提问作者MrJant