Hi there, I am trying to find an elegant solution, preferably using styles, to truncate labels on an axis in ECharts and I cannot seem to find a good one.It seems that ECharts rendered in SVG does not support the rich parameter <https://echarts.apache.org/en/tutorial.html#Render%20by%20Canvas%20or%20SVG> (this took me a while to figure out!) and there seem to be no way to add a class to the element(s). Perhaps implementing the onChartCreated -function and searching through the DOM to apply it, but manipulating the DOM does not seem like a great solution.The other option would be to implement the formatter on the axis that would do an estimated calculation on the label size and then truncate if it exceeds a certain value. Though, that would create accessibility issues and problems as the actual text is cut off.I tried to switch the rendering from SVG to Canvas to unlock the rich parameter for us, which will enable us to apply some styling, but I am not having much luck with this either. Setting the width and height to different values (e.g. 200 or '80%') will either show the full label or hide it completely. Never partly, as I would expect according to the documentation: https://echarts.apache.org/en/option.html#xAxis.axisLabel.rich.%3Cstyle_name%3E.widthIs there an elegant solution to this problem? If not, would it make sense to make it possible to add classes to different elements so you could style them? I think this would solve a lot of issues.
Kind regards, -- Michael LunøeSenior Frontend Engineer | GitLab
