Highcharts React 饼图多次渲染

Question

My code this

import React, { useEffect, useRef, useState } from "react";
import * as Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

export const PieChart = (props: any) => {
  const [chartIsLoaded, setChartIsLoaded] = useState(false);
  const series: any = [{
    innerSize: '80%',
    name: props.name,
    colorByPoint: true,
    data: props.chartData
  }]
  useEffect(() => {
    setChartIsLoaded(true);
  }, [])

  const chartComponentRef = useRef<HighchartsReact.RefObject>(null);
  const options: Highcharts.Options = {
    chart: {
        backgroundColor: "#0c0c0c",
        borderColor: "#0c0c0c",
        plotBorderWidth: 0,
        plotShadow: false,
        type: 'pie',
        height: "70%",
    },
    title: {
        style : {
            display : 'none'
          }
    },
    tooltip: {
      pointFormat: '<b>{point.percentage:.1f}%</b>',
      backgroundColor: "#1B1B1B",
      borderColor: "transparent",
      valueDecimals: 2,
      borderRadius: 0,
      style: {
        color: "#fff",
        fontSize: "15px"

      }
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    legend: {
        itemStyle: {color: "#fff", fontWeight: "400", fontFamily: "teragon-sans"}
    },
    plotOptions: {
        pie: {
            borderColor: "#0c0c0c",
            borderWidth: 6,
            allowPointSelect: true,
            color: "#fff",
            cursor: 'pointer',
            dataLabels: {
                enabled: false,
            },
            showInLegend: true
        }
    },
    series: series
  };
  return (
    <div>
      {chartIsLoaded &&
        <HighchartsReact
          highcharts={Highcharts}
          options={options}
          ref={chartComponentRef}
          oneToOne={true}
        />
      }
    </div>
  );
};

chartData coming from this code:

let data = sheetData[0].data;
let invesment = await groupData(data, "Investment Type");

Problem: Chart rendering multiple times. Also, I have Bar Chart it's happening on that. There is no problem with Line Chart. The data is preparing with reduce function but its async waiting awaits. Moreover I tried with promises. Unfortunately, It was rendered multiple times again. How can I fix this situation?

Answer 1

Your chart options are initiated after every component update which directs to the chart update on every component update. I recommend you to keep chart options in a stare or memorize them. For example:

const PieChart = ({ name, chartData }) => {
  const [chartOptions, setChartOptions] = useState(false);

  useEffect(() => {
    const series = [
      {
        innerSize: "80%",
        name,
        colorByPoint: true,
        data: chartData
      }
    ];
    const options = {
      ...,
      series
    };

    if (chartData) {
      setChartOptions(options);
    }
  }, [chartData]);

  return (
    <div>
      {chartOptions && (
        <HighchartsReact highcharts={Highcharts} options={chartOptions} />
      )}
    </div>
  );
};

---

Live demo: https://codesandbox.io/s/highcharts-react-demo-fz6rr6?file=/demo.jsx

Docs: https://www.npmjs.com/package/highcharts-react-official#optimal-way-to-update