Ellipsis for truncated axis labels

plotly.js
1

Take a look at the following example:

It is truncating the labels in the X axis, so I need to add an ellipsis when the text of a label is just too long to be fully displayed.

Is there a way to do this?

Thanks in advance.

1 Like
2

Try using xaxis.tickvals and xaxis.ticktext as in this example:

1 Like
3

This is what I was looking for.

Thanks a lot!

1 Like
4

Dear @etienne and @Leo21,
Using xaxis.tickvals and xaxis.ticktext can change the text, however since ellipsis is used in tick text, we may want to use mouse hover to show the full text, I wonder is that possible? Thanks!

5

Yes. Simply set the trace text field to an array of those long strings.

6

Dear @etienne,
Thank you for the quick reply! The text field in trace is for tooltips when hover on the plot points, but I’d like to hover on the axis tick text to show the full string of the tick text, that’s where the ellipsis are.
I may also want to use ellipsis in legend text and would like to hover on the ellipsis to show full string as well. I wonder is it possible? Thank you!

1 Like
7

I also would like this feature if it doesn’t exist already!

8

@etienne Is there any solution to do what @pppw describe?

9

I too am interest in the query posted by @pppw. Any solutions?

The text field in trace is for tooltips when hover on the plot points, but I’d like to hover on the axis tick text to show the full string of the tick text, that’s where the ellipsis are.
I may also want to use ellipsis in legend text and would like to hover on the ellipsis to show full string as well.

10

I have tried xaxis.tickvals and xaxis.ticktext to truncate lengthy labels is working fine, but I would like to show the complete full label name when the mouse hovers over the truncated label.

Please suggest any workarounds to achieve this functionality.