react-jsx-highcharts/dist/es/components/Chart/Chart.js

Highcharts charts built using React components

import { useEffect, useRef, memo } from 'react';
import { getNonEventHandlerProps } from '../../utils/events';
import useModifiedProps from '../UseModifiedProps';
import useChart from '../UseChart';
import useManualEventHandlers from '../UseManualEventHandlers';
const Chart = /*#__PURE__*/memo(({
  type = 'line',
  width,
  height,
  ...restProps
}) => {
  const chart = useChart();
  const mounted = useRef(false);
  const modifiedProps = useModifiedProps({
    type,
    ...restProps
  });
  useEffect(() => {
    if (!(width === undefined && height === undefined)) {
      chart.setSize(width, height);
    }
  }, [width, height]);
  useEffect(() => {
    if (modifiedProps !== false && mounted.current) {
      const notEventProps = getNonEventHandlerProps(modifiedProps);
      if (Object.getOwnPropertyNames(notEventProps).length > 0) {
        updateChart(modifiedProps, chart, chart.needsRedraw);
      }
    }
  });
  useEffect(() => {
    const notEventProps = getNonEventHandlerProps({
      type,
      ...restProps
    });
    updateChart(notEventProps, chart);
    mounted.current = true;
  }, []);
  useManualEventHandlers(restProps, chart.object);
  return null;
});
const updateChart = (config, chart) => {
  chart.update({
    chart: config
  }, false);
  chart.needsRedraw();
};
Chart.displayName = 'Chart';
export default Chart;