Legend text is not correctly aligned with icon (solution) #2983

Closed
JeffreyRoosendaal opened this Issue Apr 12, 2016 · 4 comments

Comments

Projects
None yet
2 participants
@JeffreyRoosendaal

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

wrong-circle

wrong-square

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:

correct-circle

correct-square


Greetings from an international user!

@pissang pissang added the enhancement label Apr 13, 2016

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Apr 13, 2016

Contributor

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

Contributor

pissang commented Apr 13, 2016

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

@JeffreyRoosendaal

This comment has been minimized.

Show comment
Hide comment
@JeffreyRoosendaal

JeffreyRoosendaal Apr 13, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Apr 13, 2016

Contributor

It seems helpful. Considering adding it in the next release

Contributor

pissang commented Apr 13, 2016

It seems helpful. Considering adding it in the next release

@pissang pissang added this to the 3.1.7 milestone Apr 16, 2016

@pissang pissang modified the milestones: 3.1.8, 3.1.7 Apr 21, 2016

@pissang pissang modified the milestones: 3.1.9, 3.1.8 May 12, 2016

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang May 16, 2016

Contributor

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

Contributor

pissang commented May 16, 2016

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

@pissang pissang closed this May 16, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment