如何在Highcharts JS中实现图例符号与文本的对齐？

当前显示效果：

预期显示效果：

使用以下配置可实现预期的图例样式：

legend: {
    floating: true,
    align: 'left',
    verticalAlign: 'top',
    y: 0,
    x: -20,
    width: 150,
    itemMarginTop: 12,
    itemMarginBottom: 12,
    alignItem: 'center',
    textAlign: '40px',
    itemStyle: {
        fontFamily: 'Inter',
        display: 'inline-block',
        verticalAlign: 'middle'
    },
    labelFormatter() {
        return `<span style="font-size: 14px;color: #595959;font-weight: 400;">${this.name}</span><br><span style="font-size: 18px;color: #1C1C1E;font-weight: 600;">${this.y}</span>`
    } 
}

配置说明： #

• floating: true让图例脱离图表布局流，配合x、y参数精准定位到左上角区域
• labelFormatter自定义图例内容，通过HTML标签实现名称与数值分行，同时设置不同的字体大小、颜色和字重
• itemMarginTop和itemMarginBottom增大图例项之间的垂直间距，提升可读性
• itemStyle统一设置字体为Inter，并确保内容垂直居中对齐

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