how to add background color for x axis and y axis of high charts

Question

I am trying to change background colour of the highcharts x and y axis background.

I am trying to fill color as below highlighted.

Answer 1

Unfortunately, axes objects does not have the attribute backgroundColor. As a workaround, you can create a rectangle behind the both axes using Highcharts SVGRenderer just like in the demo below.

Example code:

  chart: {
    spacingLeft: 0,
    events: {
      render: function() {
        const chart = this,
          xAxisBox = (chart.xAxis[0].gridGroup.getBBox()),
          yAxisBox = (chart.yAxis[0].gridGroup.getBBox());

        if (!chart.customXaxisBackground) {
          chart.customXaxisBackground = chart.renderer.rect()
            .attr({
              'stroke-width': 0,
              stroke: 'orange',
              fill: '#C7DCD8',
              zIndex: 0
            })
            .add();
        }

        chart.customXaxisBackground.attr({
          x: xAxisBox.x,
          y: xAxisBox.y - chart.plotTop / 2,
          width: chart.plotWidth,
          height: chart.plotTop / 2
        })

        if (!chart.customYaxisBackground) {
          chart.customYaxisBackground = chart.renderer.rect()
            .attr({
              'stroke-width': 0,
              stroke: 'orange',
              fill: '#C7DCD8',
              zIndex: 0
            })
            .add();
        }
        chart.customYaxisBackground.attr({
          x: yAxisBox.x - chart.plotLeft,
          y: yAxisBox.y,
          width: chart.plotLeft,
          height: chart.plotHeight
        })
      }

    }
  },

Demo: https://jsfiddle.net/BlackLabel/165720Lm/

API References: https://api.highcharts.com/highcharts/chart.events.render https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

Answer 2

I don't remember any attribute for high chart to set background color for axis. but maybe you can create your custom style by using highchart SVGRenderer. you can use it to create a rectangle on the behind of axis and fill it with custom color. also if you want to just set background for the axis labels you can use formatter to set a html element as label and set background color for it.

There is an example that may help you.

labels: {
          //Add a background to xAxis labels with HTML
          formatter() {
            return `<span style="
                                background-color: orange; 
                                display: inline-block; 
                                width: 40px; 
                                text-align: center;
                                "
                    >
                         ${this.value}
                    </span>`
          },
          useHTML: true
        }

    Highcharts.chart('container', {
      chart: {
            spacingLeft: 0,
        events: {
          render: function() {
            const chart = this,
                        xAxisBox = (chart.axes[0].gridGroup.getBBox());
            chart.renderer.rect(xAxisBox.y/*position on X-axis*/ , chart.plotHeight + xAxisBox.y /*position on Y-axis*/ , chart.plotWidth /*width*/ , 25 /*height*/)
              .attr({
                'stroke-width': 0,
                stroke: 'orange',
                fill: 'orange',
                zIndex: 3
              })
              .add();
          }
        }
      },
      series: [{
        data: [2, 5, 2, 3, 6, 5]
      }]
    });