expose chart reference

Author: benmusson

src/react-apexcharts.jsx

@@ -46,16 +46,17 @@ export default function Charts({
  height = "auto",
  series,
  options,
+ chartRef,
  ...restProps
 }) {
- const chartRef = useRef(null);
- let chart = useRef(null);
+ const chartElementRef = useRef(null);
+ let chart = chartRef || useRef(null);
  const prevOptions = useRef()
 
  useEffect(() => {
  prevOptions.current = options;
 
- const current = chartRef.current;
+ const current = chartElementRef.current;
  chart.current = new ApexCharts(current, getConfig());
  chart.current.render();
 
@@ -124,13 +125,14 @@ export default function Charts({
 
  const rest = omit(restProps, Object.keys(Charts.propTypes));
 
- return <div ref={chartRef} {...rest} />;
+ return <div ref={chartElementRef} {...rest} />;
 }
 
 Charts.propTypes = {
  type: PropTypes.string.isRequired,
  series: PropTypes.array.isRequired,
  options: PropTypes.object.isRequired,
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+ height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ chartRef: PropTypes.shape({ current: PropTypes.any })
 };

types/react-apexcharts.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react"/>
-import { ApexOptions } from "apexcharts";
+import ApexCharts, { ApexOptions } from "apexcharts";
 import React from "react";
 /**
  * Basic type definitions from https://apexcharts.com/docs/react-charts/#props
@@ -27,6 +27,7 @@ declare module "react-apexcharts" {
  width?: string | number;
  height?: string | number;
  options?: ApexOptions;
+ chartRef?: React.RefObject<ApexCharts | null>;
  [key: string]: any;
  }
  export default class ReactApexChart extends React.Component<Props> {}