vamsi426
Posts: 15
Joined: Mon Apr 04, 2022 1:25 pm

How to change/ fill background color of x-axis (svg element -g)

Please check the attached images , i want to change the background color of x-axis (for ex: to orange/ red) . So, foe that g element i need to change color,
Can you please help me to achieve that ?
Attachments
s2.PNG
s2.PNG (27.76 KiB) Viewed 657 times
s1.PNG
s1.PNG (95.94 KiB) Viewed 657 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How to change/ fill background color of x-axis (svg element -g)

Hello vamsi426,
We appreciate you reaching out to us!

Unfortunately, the xAxis object does not have the attribute backgroundColor. As a workaround, you can create a rectangle behind the xAxis using Highcharts SVGRenderer just like in the demo below.

Demo: https://jsfiddle.net/BlackLabel/x0z96ktp/
API Reference: https://api.highcharts.com/highcharts/c ... nts.render
https://api.highcharts.com/class-refere ... VGRenderer

Feel free to ask any further questions!
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”