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

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

• javascript
• jquery
• highcharts

Share Improve this question Follow asked Mar 7, 2012 at 20:09 Navin LeonNavin Leon 1,16655 gold badges2222 silver badges4545 bronze badges 1

• 1 Just in case, it's possible, see that answer. – Paweł Fus Commented Nov 27, 2013 at 12:57

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

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

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 e across this question.

 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.

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

Use only useHtml:true in your labels object { useHTML: true, formatter(val: any) { const category = props?.xAxis?.categories;

          const findedItem = category.find(
            (item: any) => item.count === val.value
          );

          
          return `<span
          style="
          padding:2px 4px;
          color: #fff;
          background: #000"

        >
          ${val.value ? formatPrice(val.value) : 0}
        </span>`;
        },
      }
}

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