Truncating labels on axis in ECharts

[Michael Lunøe <ml...@gitlab.com.INVALID>]

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

Re: Truncating labels on axis in ECharts

[Ovilia <ov...@gmail.com>]

Hi Michael,

Just to clarify your requirements. Do you need a way to automatically
truncate labels of axis.axisLabel? ECharts avoids label overlapping by
default in the way that less labels will be displayed when the text is
long. So do you mean you have set the interval manually so that this no
longer works for you?

I'd suggest creating an online demo with
https://codepen.io/Ovilia/pen/dyYWXWM so that we can understand the
requirement better.

Thanks

*Ovilia*


On Tue, Jun 23, 2020 at 10:26 PM Michael Lunøe <ml...@gitlab.com.invalid>
wrote:

> 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
>