How to add background color for apexcharts y-axis?

Using apex chart

My code - Fiddle

var options = {
  series: [{
    name: 'PRODUCT A',
    data: [44, 55, 41, 67, 22, 43]
  }, {
    name: 'PRODUCT B',
    data: [13, 23, 20, 8, 13, 27]
  }, {
    name: 'PRODUCT C',
    data: [11, 17, 15, 15, 21, 14]
  }, {
    name: 'PRODUCT D',
    data: [21, 7, 25, 13, 22, 8]
  }],
  chart: {
    type: 'bar',
    height: 350,
    stacked: true,
    toolbar: {
      show: true
    },
    zoom: {
      enabled: true
    }
  },
  responsive: [{
    breakpoint: 480,
    options: {
      legend: {
        position: 'bottom',
        offsetX: -10,
        offsetY: 0
      }
    }
  }],
  plotOptions: {
    bar: {
      borderRadius: 8,
      horizontal: false,
    },
  },
  xaxis: {
    type: 'datetime',
    categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
      '01/05/2011 GMT', '01/06/2011 GMT'
    ],
  },
  yaxis: {
    labels: {
      style: {
        fontSize: "12px",
        fontWeight: 400,
        fontFamily: "Open Sans",
        colors: ["#7286EA"],
        backgroundColor: '#e7e7e7',
        },
      },
   },
  
  legend: {
    position: 'right',
    offsetY: 40
  },
  fill: {
    opacity: 1
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

Add for yaxis labels style - backgroundColor: '#e7e7e7' - but it doesn't work

I try to do as in the image

Thanks in advance for any help

Solution

How to add background color for Apexcharts y-axis?

You can add a background playing with javascript and the SVG Apexcharts made.

You can access the SVG they create through querySelector then add elements or other tricks you could think of to make it the way you want.

This lets you be very flexible and do exactly what you want.

   var options = {
    series: [
      {
        name: 'PRODUCT A',
        data: [44, 55, 41, 67, 22, 43]
      },
      {
        name: 'PRODUCT B',
        data: [13, 23, 20, 8, 13, 27]
      },
      {
        name: 'PRODUCT C',
        data: [11, 17, 15, 15, 21, 14]
      },
      {
        name: 'PRODUCT D',
        data: [21, 7, 25, 13, 22, 8]
      }
    ],
    chart: {
      type: 'bar',
      height: 350,
      stacked: true,
      toolbar: {
        show: true
      },
      zoom: {
        enabled: true
      },
      events: {
        mounted: function() {
          addYAxisBackground()
        },
        updated: function() {
          addYAxisBackground()
        }
      }
    },
    responsive: [
      {
        breakpoint: 480,
        options: {
          legend: {
            position: 'bottom',
            offsetX: -10,
            offsetY: 0
          }
        }
      }
    ],
    plotOptions: {
      bar: {
        borderRadius: 8,
        horizontal: false
      }
    },
    xaxis: {
      type: 'datetime',
      categories: [
        '01/01/2011 GMT',
        '01/02/2011 GMT',
        '01/03/2011 GMT',
        '01/04/2011 GMT',
        '01/05/2011 GMT',
        '01/06/2011 GMT'
      ]
    },
    yaxis: {
      labels: {
        style: {
          fontSize: '12px',
          fontWeight: 400,
          fontFamily: 'Open Sans',
          colors: ['#7286EA'],
          backgroundColor: '#e7e7e7'
        }
      }
    },

    legend: {
      position: 'right',
      offsetY: 40
    },
    fill: {
      opacity: 1
    }
  }

  var chart = new ApexCharts(document.querySelector('#chart'), options)
  chart.render()

  function addYAxisBackground() {
    var ctx = document.querySelector('svg'),
      textElm = ctx.querySelector('svg g'),
      SVGRect = textElm.getBBox()

    var rect = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'rect'
    )
    rect.setAttribute('x', SVGRect.x)
    rect.setAttribute('y', SVGRect.y)
    rect.setAttribute('width', '90px')
    rect.setAttribute('height', SVGRect.height + 20)
    rect.setAttribute('fill', 'yellow')
    ctx.insertBefore(rect, textElm)
  }

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>