Set background color to HighChart xAxis labels

Question

How can I set background color to HighChart xAxis labels.

I tried the below but no luck

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

Thanks in Advance Navin

Answer 1

You can't. The xAxis object does not have the attribute backgroundColor.

Answer 2

The answer by @dgw is not correct.

It's possible: you can set use HTML flag and add your own css style.

See this answer

Answer 3

While @dgw is technically correct in stating that the x-axis does not have a backgroundColor property, there are alternatives you can use to achieve this effect.

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

I hope these resources will be helpful for others who come across this question.

Answer 4

 xAxis: {
        labels: {
            useHTML: true,
            formatter: function () {
                return '<span class="xaxis-label">' + (this.value).toFixed(2) + '</span>';
            }
            
        }
    }

then in css file

.xaxis-label {
background-color: #fff;
padding: 0px 5px;
font-size: 15px;
}

Does the trick.

Answer 5

I think the answer to this could be a little tricky and but here are the steps I followed to fix it for me.

set chart Background to a color you want your xAxis and yAxis to have

 chart: {
      backgroundColor: '#eee',
         },

then ass a polygon series to chart with max out y and x-axis with desired chart background

 series: [
                    {
                        name: 'Extremely Bad',
                        type: 'polygon',
                        color: '#fff', // desired background for plot area
                        zIndex: 0,
                         data: []
                    },
                    {
                    name: '',
                    type: 'scatter',  // desired series
                    data: [],

                   }]

and add z index to xAxis and y-axis to show gridlines