Highcharts折线图渲染问题：系列线条/标记被Y轴截断

问题根源 #

当Y轴固定max: 100且数据值等于100时，图表绘图区域顶部未预留额外空间，导致标记点、线条被Y轴边界截断，同时触发渲染逻辑异常，造成部分线条粗细变小。

修复方案 #

1. 用softMax替代max（优先推荐） #

将max替换为softMax: 100，既保证数据不超过100时Y轴上限稳定在100，又能让Highcharts自动为顶部数据预留缓冲空间，避免截断。修改后的Y轴配置：

yAxis: {
    title: {
        text: ''
    },
    tickAmount: 5,
    labels: {
        format: '{value}%',
        style: {
            color: 'var(--el-text-color-primary)'
        }
    },
    min: 0,
    softMax: 100 // 替换原max配置
}

2. 手动设置maxPadding预留空白 #

若必须固定Y轴最大值为100，可添加maxPadding参数在顶部预留比例空白：

yAxis: {
    title: {
        text: ''
    },
    tickAmount: 5,
    labels: {
        format: '{value}%',
        style: {
            color: 'var(--el-text-color-primary)'
        }
    },
    min: 0,
    max: 100,
    maxPadding: 0.05 // 顶部预留5%空白，可根据视觉效果调整
}

3. 提升标记点层级确保显示 #

如果标记点仍被截断，可给系列标记设置更高zIndex：

series: [{
    // 其他系列配置
    marker: {
        zIndex: 10 // 让标记点显示在Y轴上方
    }
}]

效果验证 #

调整后，数据值为100时，标记点和线条不会被Y轴截断，线条粗细也能保持一致。

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