Increase width of annotation on hover

[tlhunag]

Is there a way to show more text on hover of an annotation?

I have an annotation with a description text. I would like this text to cut off at a certain character count or initially show a specific width to start. On hover I want the full description to show. I've tried several options but unable to get this to work. Is this possible?

Here is a jsfiddle: https://jsfiddle.net/cxa9tpj6/

Thank you for your help.

[dominik.c]

Hello tlhunag!

Welcome to our forum and thanks for contacting us with your question!

We can use styling and set text-overflow property to ellipsis and then set the width of the annotation to which value it should shorten if the text requires a wider box than we set.

API references:
https://api.highcharts.com/highcharts/a ... bels.style

Demo:
https://jsfiddle.net/BlackLabel/w7cnuoz3/

Unfortunately, there's no hover event on annotation, so we can't get it simply done by API. There are three implemented events that you can read about here: https://api.highcharts.com/highcharts/a ... ons.events

Best regards!

[tlhunag]

Thank you, Dominik, for your quick response. The styling suggestions were helpful. Now I'm trying to add a click event to toggle the style between ellipsis with a set width and showing the entire text but the styles don't update the annotation.

Demo: https://jsfiddle.net/usm6dg4h/

Should I be updating the styles somewhere else? Any suggestions?

Thank you!

[dominik.c]

Hi again!

You were close to the solution. To update styles you need to use the update method on the annotation label.

API references:
https://api.highcharts.com/class-refere ... ion#update

Demo:
https://jsfiddle.net/BlackLabel/dtkac0g9/

Best regards!

[tlhunag]

Thank you again. I forgot about using the update method. I was able to incorporate your suggestions to toggle the width of the annotation on click. Unfortunately, it causes issues with the dragging feature.

If I drag first, then click: The width increases but it moves back to its original position.
If I click first, then drag: It errors out.

See Demo: https://jsfiddle.net/5yb83fs6/3/

Any suggestions for preserving the drag function after updating the style? Thanks for your help.

[dominik.c]

Hi again!

I'm afraid that it might be a bug. Could you report it on our GitHub? Over there we could discuss this issue and find a good workaround for you.

Link: https://github.com/highcharts/highchart ... new/choose

Best regards!

[tlhunag]

Thank you for your help. I've opened an issue.

[dominik.c]

Thanks for that!

In case of any further questions, feel free to contact us again.