reactjs - ReactApexChart background remove - Stack Overflow

Bar Chart Image

When the data count is small, the bars in the bar chart become too wide. To address this, I set barHeight: '20%'. However, this introduces another issue where the white background becomes overly visible. How can this issue be resolved?

Below is my barChartOptions:

const barChartOptions = {
    chart: {
      stacked: true,
      events: {
        dataPointSelection,
      },
      toolbar: {
        show: false,
      },
      animations: {
        enabled: true,
        speed: 2000,
        animateGradually: {
          enabled: false,
        },
        dynamicAnimation: {
          enabled: true,
        },
      },
    },
    plotOptions: {
      bar: {
        horizontal: horizontal,
        barHeight: '20%',
        dataLabels: {
          position: 'end',
        },
        distributed: false,
      },
    },
    dataLabels: {
      enabled: false,
      ...dataLabels,
    },
    xaxis: {
      categories: categories,
      labels: {
        style: {
          fontWeight: 'bold',
          fontSize: '9px',
        },
        show: show,
      },
      ...xaxis,
    },
    columnWidth,
    yaxis,
    legend: legend,
    colors,
    title: {
      text: title,
      align: 'left' as 'left' | 'right' | 'center',
    },
    grid: {},
    responsive: [
      {
        breakpoint: 768,
        options: {
          chart: {
            height: 300,
          },
          xaxis: {
            min: 0,
            max: 5,
          },
        },
      },
    ],
  }

I need to remove or reduce the white background.