ReferenceError: ApexCharts is not defined

[SmithKy3]

Hey, first off, nice work! ApexCharts is great.

I'm trying to upgrade to the latest versions of apexcharts and react-apexcharts and have run into an issue; rendering a brush chart causes a ReferenceError: ApexCharts is not defined to be thrown.

It looks to me like apexcharts expects ApexCharts to be available globally, specifically when wanting to find another chart instance with the getChartByID method.
This library used to assign ApexCharts to the window but that was removed in https://github.com/apexcharts/react-apexcharts/pull/635/files#diff-e2dbd809cfd748d199fe532812de9629182a3c244b6c13df2e91972e96ccab99 so this error occurs.

I managed to reproduce it with a simple example just now by doing the following:

1. Cloned this repo
2. Updated src/react-apexcharts.test.js to the following:

import React from 'react'
import { createRoot } from 'react-dom/client'
import Chart from './react-apexcharts.jsx'

const type = 'line'
const categories = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
const series = [{
  data: [30, 40, 25, 50, 49, 21, 70, 51]
}]

describe('react-apexcharts', () => {
  Object.defineProperty(window, 'ResizeObserver', {
    writable: true,
    value:
     window.ResizeObserver 
     || jest.fn().mockImplementation(() => ({
          observe: jest.fn(),
          unobserve: jest.fn(),
          disconnect: jest.fn()
     }))
  });
  
  Object.defineProperty(global.SVGElement.prototype, 'getBBox', {
    writable: true,
    value: jest.fn().mockReturnValue({
      x: 0,
      y: 0,
    }),
  }); 
  
  it('renders a simple bar chart without errors', async () => {
    const div = document.createElement('div');
    const root = createRoot(div);
    root.render(
      <Chart
        type={type}
        series={series}
        options={{
          xaxis: {
            categories
          }
        }}
      />
    );
    // Wait for a little bit to let ApexCharts do what it needs to do
    await new Promise(resolve => setTimeout(resolve, 5000));
    root.unmount();
  }, 10000);
  
  it('renders a brush chart without errors', async () => {
    const div = document.createElement('div');
    const root = createRoot(div);
    root.render(
      <React.Fragment>
      <Chart
        type={type}
        series={series}
        options={{
          chart: {
            id: 'xyz',
            toolbar: {
              autoSelected: 'pan',
              show: false,
            },
          },
          xaxis: {
            categories
          }
        }}
      />
      <Chart
        type={type}
        series={series}
        options={{
          chart: {
            brush: {
              enabled: true,
              target: 'xyz',
            },
            selection: {
              enabled: true,
            },
            toolbar: {
              tools: {
                selection: true,
              },
            },
          },
          xaxis: {
            categories
          }
        }}
      />
      </React.Fragment>);
    // Wait for a little bit to let ApexCharts do what it needs to do
    await new Promise(resolve => setTimeout(resolve, 5000));
    root.unmount();
  }, 10000)
  
})

3. Ran the tests

I haven't tested it but I assume including apexcharts directly via a CDN / script tag would work but this doesn't seem ideal.
Was there a reason for removing the window assignment?