Merge pull request #687 from benmusson/feat/chart-ref

Expose ApexCharts Reference

Author: junedchhipa

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> {}