Tobias
Posts: 9
Joined: Thu Jun 23, 2022 9:12 am

Custom HTML elements instead "no-data message"

Hello Highcharts-forum,

I would like to customize the no-data message of Highcharts. Of course I know I can change the message itself with the lang attribute of the charts options, but I would like to show more than just a messag. I would like to show a div with some icons and more complex message in it.
Is this possible?

Thanks in advance and best regards,
Tobias
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Custom HTML elements instead "no-data message"

Hello Tobias,

Thanks for contacting us again!

The lang.noData property is the right way to achieve that. All you have to do is set the noData.useHTML property to true which allows you to pass the HTML tags to the lang.noData property.

Take a look at this example for better visualization: https://jsfiddle.net/BlackLabel/8y7wkd23/

Let me know if this solution meets your needs,
Kind Regards!
Kamil Kubik
Highcharts Developer
Tobias
Posts: 9
Joined: Thu Jun 23, 2022 9:12 am

Re: Custom HTML elements instead "no-data message"

Hello Kamil,
thank you very much for your quick reply and your example, which is very helpful.

One last question regarding this subject: since our company is using Highcharts' React implementation, is it possible to add React components for custom no-data messages, instead of pure HTML tags?

Thanks in advance and best regards,
Tobias
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Custom HTML elements instead "no-data message"

That's great to hear you found it helpful!

It is possible to achieve that in React but the implementation would be slightly different. My recommendation is to use the portals to directly move the elements in place you need. You can read more about it here in our official React wrapper: https://github.com/highcharts/highchart ... ts-element

Regards!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Usage”