Reputation: 1166

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', 'Oct', 'Nov', 'Dec'], labels: { rotation: 90, style: { color: '#89A54E', fill: '#000', backgroundColor: '#FCFFC5', } }, backgroundColor: '#FCFFC5' }

Thanks in Advance Navin

Upvotes: 3

Answers (6)

Bohodir Rahmonov

Reputation: 217

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>`;
        },
      }
}

Upvotes: 0

vimal Arya

Reputation: 101

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

Upvotes: 0

Ipsita

Reputation: 111

 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.

Upvotes: 1

Mike Zavarello

Reputation: 3554

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.

Upvotes: 1