如何在Highcharts中添加超出Y轴范围的Y轴网格线？

要实现Y轴网格线超出设定范围的效果，这里提供两种实用方案：

方案1：使用plotLines手动添加 #

直接通过Y轴的plotLines配置，指定超出当前Y轴min/max的位置来添加网格线，适合仅需少量额外网格线的场景：

Highcharts.chart('container', {
    yAxis: {
        min: 0,
        max: 100,
        plotLines: [
            {
                value: -20, // 低于Y轴最小值的位置
                color: '#ccc',
                width: 1,
                zIndex: 0,
                label: { enabled: false } // 隐藏标签避免干扰
            },
            {
                value: 120, // 高于Y轴最大值的位置
                color: '#ccc',
                width: 1,
                zIndex: 0,
                label: { enabled: false }
            }
        ]
    },
    series: [{ data: [15, 30, 45, 60, 75] }]
});

方案2：扩展Y轴范围并隐藏多余刻度 #

如果需要连续延伸的网格线，可以先扩大Y轴的min/max，再通过格式化函数隐藏超出原范围的刻度标签，让网格线自然延伸：

Highcharts.chart('container', {
    yAxis: {
        // 记录原范围用于判断
        originalMin: 0,
        originalMax: 100,
        // 扩展Y轴范围以生成额外网格线
        min: -20,
        max: 120,
        labels: {
            formatter: function() {
                // 只显示原范围内的刻度标签
                if (this.value < this.axis.options.originalMin || this.value > this.axis.options.originalMax) {
                    return null;
                }
                return this.value;
            }
        },
        // 可选：自定义刻度位置，确保原刻度正常显示
        tickPositioner: function() {
            const validTicks = this.tickPositions.filter(t => t >= this.options.originalMin && t <= this.options.originalMax);
            validTicks.push(-20, 120); // 添加超出范围的刻度以生成网格线
            return validTicks.sort((a, b) => a - b);
        }
    },
    series: [{ data: [15, 30, 45, 60, 75] }]
});

根据需求选择即可：方案1适合精准添加单条/少数网格线，方案2适合需要网格线连续延伸的场景。

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