[Feature] Support letter-spacing and word-spacing Properties in Legend Text
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:
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.
This is similar to #21289 but different enough that I think it warrants it's own issue.