Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ReferenceError: ApexCharts is not defined #666

Closed
SmithKy3 opened this issue Dec 19, 2024 · 0 comments · Fixed by apexcharts/apexcharts.js#4884
Closed

ReferenceError: ApexCharts is not defined #666

SmithKy3 opened this issue Dec 19, 2024 · 0 comments · Fixed by apexcharts/apexcharts.js#4884

Comments

@SmithKy3
Copy link

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)
  
})
  1. 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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant