Set the background color to the HighChart xAxis shortcuts

Question

How to set background color for HighChart xAxis shortcuts.

I tried below but no luck

xAxis: {Categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], tags: {rotation: 90, style: {color: '# 89A54E', fill: '# 000', backgroundColor: '# FCFFC5',}}, backgroundColor: '# FCFFC5'}

Thanks in Advance Navin

Answer 1

You can not. The xAxis object does not have a backgroundColor attribute.

Answer 2

The answer to @dgw is incorrect.

Perhaps: you can set the HTML flag and add your own css style.

See this answer

Answer 3

Although @dgw technically correctly states that the x axis does not have the backgroundColor property, there are alternatives to achieve this effect.

• Highcharts.js - axis background color only : the accepted answer in this post shows how to use the renderer.rect() function to draw a colored frame at the bottom of your chart, behind the x-axis labels.
• How to format shortcuts for chart column data : My answer in this post shows how to draw a similar rectangle, but based on current chart dimensions and fixed values.
• Highchart: axis background color : the answers in this post that were given by @ dyingangel666 also show how to set the background for certain intervals in the x axis. I used @Mark's answer as inspiration for my own solution.

I hope that these resources will be useful to others who come across this issue.