You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
I managed to reproduce it with a simple example just now by doing the following:
Cloned this repo
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)
})
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?
The text was updated successfully, but these errors were encountered:
Hey, first off, nice work! ApexCharts is great.
I'm trying to upgrade to the latest versions of
apexcharts
andreact-apexcharts
and have run into an issue; rendering a brush chart causes aReferenceError
:ApexCharts is not defined
to be thrown.It looks to me like
apexcharts
expectsApexCharts
to be available globally, specifically when wanting to find another chart instance with thegetChartByID
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:
src/react-apexcharts.test.js
to the following: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?
The text was updated successfully, but these errors were encountered: