React ApexCharts v2.2.0

🐛 Bug fixes

Passing ref to a chart no longer breaks it on React 19 (#745)

React 19 passes ref to function components as an ordinary prop. The chart wrapper forwarded its remaining props to its container <div>, so a ref you passed replaced the one the chart uses internally. The chart lost its element and failed to render with Element not found.

ref is now ignored by the client, core and hydrate components, so the chart always keeps its own container. Thanks to @dajiaohuang for tracking this down and fixing it (#753).

⚠️ TypeScript changes

The type definitions now match the implementation:

• react-apexcharts and react-apexcharts/core are declared as function components instead of classes.
• ref is typed as never on all client and hydrate components.

If your code passes ref to a chart, or uses ReactApexChart as a type (for example useRef<ReactApexChart>()), it will now fail to compile. That ref never pointed at anything useful: on React 18 it stayed null, and on React 19 it broke the chart. To reach the ApexCharts instance, use chartRef:

import ApexCharts from "apexcharts";
import Chart from "react-apexcharts";

const chartRef = useRef<ApexCharts | null>(null);

<Chart type="line" series={series} options={options} chartRef={chartRef} />;

chartRef.current?.updateSeries(newSeries);

🧪 Testing

The test suite now runs on GitHub Actions against both React 18 and React 19.

npm i react-apexcharts@^2.2.0