Customize Pie Chart Title and Subtitle with Ellipses and Tooltip

[mateusdomingos]

I would like to customize Pie Chart title and subtitle with ellipses and tooltip.

Capturar.PNG (34.54 KiB) Viewed 631 times

The ideal was a simple way to do this because I'm creating a component that other people will use: https://jsfiddle.net/mateusdomingos/ozd6gpqu/1/

I was trying with this example to at least customize the text with an ellipse, but I couldn't get the title and description aligned correctly: https://jsfiddle.net/mateusdomingos/56nurq2e/26/

Is there any way to do this?

[hubert.k]

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

To create an alipses in title you can add some CSS styles to your chart's title and set a title.useHTML property to true and set a proper title.widthAdjust. To customize a tooltip you can use some properties like tooltip.backgroundColor or tooltip.style
Demo: https://jsfiddle.net/BlackLabel/5ze7d94f/
API Reference: https://api.highcharts.com/highcharts/title.useHTML
https://api.highcharts.com/highcharts/tooltip

Let me know if that fits your requirement and feel free to ask any further questions.
Regards!

[mateusdomingos]

Hi hubert.k, thank you so much for answering me!

Your example works perfectly for me, the only question I still have is whether to put the tooltip for the title and subtite, in case the text is very large and needs ellipsis, the user will be able to read the entire text.
From what I understand, the tooltip settings are only for Chart items.

Do you know if it is possible to put tooltip in the title and subtitle as it is in the attached image?

[mateusdomingos]

As for the tooltip, I used the span title and it's great for me as it is in the example: https://jsfiddle.net/mateusdomingos/yr57gtqz/25/

Again thank you very much!

[hubert.k]

You're welcome! In case of any further questions, feel free to contact us again.