Set Background Color To Highchart Xaxis Labels

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',

Solution 1:

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

Solution 2:

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.

Solution 3:

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: 0px5px;
font-size: 15px;
}

Does the trick.

Solution 4:

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

Solution 5:

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