grobin1206
Posts: 2
Joined: Thu Dec 01, 2022 6:42 pm

Modifying an event label

Hello all!

I'm new to using Highcharts, and would like to modify an event label that I added to a bar chart; the label appears only when no data is returned for the bar chart; see the expression below:

"function(){if (typeof this.series[0].data[0] == 'undefined'){this.renderer.label('Chart Currently Has No Data', 150, 120).attr({fill:'white',padding: 10,r: 5}).css({color: '#17202A'; }).add();}}"

I'd like to increase the font size of the label and make the style to be bold. Thanks in advance for any assistance or suggestions that are provided.
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Modifying an event label

Hello grobin1206,

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

You have already handled it by applying the css method to the renderer.label. All you need to do is to define the fontSize and fontWeight properties inside this method.

Please, take a look at this simplified example: https://jsfiddle.net/BlackLabel/u6mbLj4f/

Let me know if that was what you were looking for,
Kind Regards!
Kamil Kubik
Highcharts Developer
grobin1206
Posts: 2
Joined: Thu Dec 01, 2022 6:42 pm

Re: Modifying an event label

Hello kamil.k!!

Thanks very much for your help!!! It works exactly as I hoped it would! Can you please elaborate on the use of the css method, or point me in the direction of reference material to read on its usage?

Regards,

grobin1206
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Modifying an event label

That's great to hear the solution works for you.

You can read more about the css method on SVGElement here: https://api.highcharts.com/class-refere ... lement#css
What can be even more useful is a list of all possible styles you can use, take a look: https://api.highcharts.com/class-refere ... .CSSObject

In case of any other questions, feel free to contact us anytime,
Regards!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Usage”