echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Feature] Support letter-spacing and word-spacing Properties in Legend Text

Open meganthecoder opened this issue 3 weeks ago • 1 comments

What problem does this feature solve?

This allows developers to adjust the letter-spacing and word-spacing properties without the legend text overlapping with the icon. A developer might need to set these styling properties because of the designs they were given or they might need to support it for WCAG accessibility compliance (1.4.12 Text Spacing [Level AA] – WCAG 2.1).

The following screenshot shows how the legend text overlaps with the icon if you try to change the letter-spacing and word-spacing properties outside of echarts:

Image

You can recreate the right side of the screenshot by using the Text Spacing Editor chrome extension on the stacked area chart example page.

This could be solved by supporting the letter-spacing and word-spacing properties in the legend textStyle options.

What does the proposed API look like?

setOption({
  legend: {
    textStyle: {
      letterSpacing: 'normal', // should support em values and px values as well
      wordSpacing: 'normal', // should support em values and px values as well
    },
  },
})

The legend would need to take these properties into consideration when calculating the size of each item.

meganthecoder avatar Dec 01 '25 23:12 meganthecoder

This is similar to #21289 but different enough that I think it warrants it's own issue.

meganthecoder avatar Dec 01 '25 23:12 meganthecoder