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