score:1

Accepted answer

so since you are using useeffect with empty dependency array, your component pie will only run the pie chart creation code inside useeffect on component mount.

now since you are fetching the data using axios asynchronously, the data will be passed to the pie component after it is already mounted. so now data changes will not be reflected in pie chart.

adding the props.data in the dependency array will run the useeffect whenever new data is passed to the pie component. (i.e. on props update).

useeffect(() => {
  // your code for rendering pie chart
  return () => {
    pie.dispose();
  };
}, [props.data])

https://codesandbox.io/s/blissful-fast-djuxm?file=/src/pie.jsx

score:1

you need to add a conditional render to check if data is not an empty array:

return (
    <section classname="statistics">
       {data.length > 0 && <pie data={data} />}
    </section>
  );

edit nervous-cartwright-64u9k

or instead of a render condition you can add props.data to uselayouteffect dependencies:

uselayouteffect(() => {
    let pie = am4core.create("chartdiv", am4charts.piechart3d);

    let piedata = [];
    props.data.map((item) => {
      let obj = {};
      obj = { name: item.prod_name, quantity: item.prod_quantity };
      piedata.push(obj);
    });
    // ...
    pie.data = piedata;
    let pieseries = pie.series.push(new am4charts.pieseries3d());
    pieseries.slices.template.strokeopacity = 1;
    pie.radius = am4core.percent(70);

    pieseries.datafields.value = "quantity";
    pieseries.datafields.category = "name";
    pieseries.hiddenstate.properties.opacity = 1;
    pieseries.hiddenstate.properties.endangle = -90;
    pieseries.hiddenstate.properties.startangle = -90;
    pie.hiddenstate.properties.radius = am4core.percent(60);
    pie.innerradius = am4core.percent(40);
    chart.current = pie;
    return () => {
      pie.dispose();
    };
  }, [props.data]);

edit elegant-minsky-tjbuj


Related Query

More Query from same tag