I can’t render the Pie Chart with React ApexCharts (need to stay on this one) in its full size when there are a lot of series without either the legend cannibalizing the pie space or having to render either legend and chart in different components.

How can I build the following chart without having to build the legends in another container?

const pieOptions = {
    chart: {
      width: '100%',
      type: 'pie',
    },
    legend: {
      position: 'bottom',
    },
    responsive: [
      {
        breakpoint: 480,
        options: {
          legend: {
            position: 'bottom',
          },
        },
      },
    ],
  };


const renderMobileView = () => (
  <>
    {['categories', 'banks', 'paymentMethods', 'transactionTypes'].map((chartType) => (
      <div className="my-4 mx-auto w-full p-2" key={chartType}>
        <div className="chart-container" style={{ height: '300px' }}>
          <ReactApexChart
            options={{
              ...pieOptions,
              labels: Object.keys(chartData[chartType]),
              chart: {
                ...pieOptions.chart,
                width: '100%',
                height: '100%',
              },
              legend: {
                show: false, // Hide legend here
              },
            }}
            series={pieSeries(chartData[chartType])}
            type="pie"
            key={`${chartType}-${renderKey}`}
          />
        </div>
        <div className="legend-container mt-4" style={{ maxHeight: '150px', overflowY: 'auto' }}>
          <ReactApexChart
            options={{
              ...pieOptions,
              labels: Object.keys(chartData[chartType]),
              chart: {
                ...pieOptions.chart,
                type: 'pie',
                width: '1%',
                height: '1%',
                animations: {
                  enabled: false,
                },
              },
              legend: {
                show: true,
                position: 'bottom',
                horizontalAlign: 'left',
                floating: false,
                fontSize: '14px',
                offsetY: 0,
                itemMargin: {
                  horizontal: 5,
                  vertical: 2
                },
              },
              dataLabels: {
                enabled: false,
              },
              tooltip: {
                enabled: false,
              },
            }}
            series={pieSeries(chartData[chartType])}
            type="pie"
            height={150}
            key={`legend-${chartType}-${renderKey}`}
          />
        </div>
      </div>
    ))}

    <div className="my-4">
      <ReactApexChart
        options={{
          ...barOptions,
          chart: {
            ...barOptions.chart,
            width: '100%',
          },
        }}
        series={[{ data: generateSeries(chartData.dates) }]}
        type="bar"
        key={`dates-${renderKey}`}
      />
    </div>
  </>
);