Legend text is not correctly aligned with icon (solution)

[jeffrey-roosendaal]

I noticed that the text align in the legend is not correct. It happens with every symbol type. See screenshots below.

This happens both on your website (http://echarts.baidu.com/demo.html#area-stack) as well as on my website.

---

I've updated line 41766 in echarts.js (3.1.6, not minimized) to:

y: (itemHeight / 2) - 6 (I've added the - 6 as a correction).

Now, they're perfectly aligned:

---

Greetings from an international user!

[pissang]

Hi Jeffrey, can you give us the fontFamily in your case. We noticed that it has the same problem when using Microsoft Yahei.

[jeffrey-roosendaal]

I'm using Open Sans through Google Fonts.

Maybe the best solution here would be to add a legend.textStyle.lineHeight option. So people can adjust the vertical text alignment for other/custom fonts too.

[pissang]

It seems helpful. Considering adding it in the next release

[pissang]

Vertical align has been fixed in ecomfe/zrender@65097a1. Tried Open Sans and it seems align problem not exists anymore.

[kkkisme]

5.2.1 存在同样问题，并且使用legend.textStyle. padding 控制不起作用
legend: {
icon: "rect",
itemWidth: 12,
itemHeight: 12,

}

[Turing97]

5.2.1 存在同样问题，并且使用legend.textStyle. padding 控制不起作用 legend: { icon: "rect", itemWidth: 12, itemHeight: 12,

}

版本5.2.2 我也遇到了，用svg渲染就正常了，奇怪

[Raphyyy]

I can't find a way to correctly align the legend text with Roboto font (Echarts 5.2.2 used)
Setting legend.textStyle.lineHeight doesn't change a thing