Rendering more charts

[honeyman22]

Description
I am experiencing an issue when rendering a Sunburst chart with dynamic data fetched from an API. The chart renders correctly with static data, but with dynamic data, the chart shows a blank space and then another Sunburst chart.

Steps to Reproduce
Use static data to render the Sunburst chart: The chart renders correctly.
Fetch dynamic data from an API.
Implement a loading state while waiting for the API response.
Render the Sunburst chart once the data is fetched.
Expected Behavior
The Sunburst chart should render correctly with the dynamic data, without any blank spaces or duplicate charts.

Actual Behavior

A blank space appears where the chart should be.
Another Sunburst chart is rendered, leading to two charts being displayed: one blank and one with data.

Environment
Library Version: ^1.19.2
React Version: ^18.2.0
Vite Version :^5.0.8
Browser: CHrome
Operating System: Windows [10]

[vasturiano]

@honeyman22 thanks for reaching out. Please provide a simple reproducing example on https://codesandbox.io/ so that we can help out in determining the cause of the issue.

[coreymunn3]

@honeyman22 check these closed issues. This behaviour is a common occurrence in react. This issue identifies the same problem with a solution, and my comment at the bottom of this other issue should give you all you need.

We can mark this issue as closed. @vasturiano If anyone else asks about any bugs similar to this duplication and their environment includes React, I would just paste links to issue 85 and issue 100 and immediately close. I think this user as well as others are having trouble finding solutions because they aren't searching through closed issues, only open ones.

[sundargautam18]

Just use cleanup funciton // Cleanup function
return () => {
container.innerHTML = "";
};

 useEffect(() => {
    if ( !chartRef.current) return;

    const container = chartRef.current as HTMLElement;

    // Clear previous chart content
    container.innerHTML = "";
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    //@ts-ignore
    const myChart = Sunburst()
      .height(372)
      .width(300)
      .data({
        name: "root",
        children: [
          {
            name: "Vacant",
            tag: "vacant",
            value: 10
          },
          {
            name: "Occupied flats",
            tag: "packed",
            total: 12,
            children: [
              {
                name: "By owners",
                tag: "residentials",
                value: 6,
              },
              {
                name: "By tenants",
                tag: "non-residentials",
                value: 6
              },
            ],
          },
        ],
      })
      .excludeRoot(true)
      .label((d: { value: any; total: any; }) => `${d.value ?? d.total ?? 0}`)
      .tooltipContent((d: { value: any; name: any; total: any; }) =>
        d.value ? `${d.name}: ${d.value ?? 0}` : `${d.name}: ${d.total ?? 0}`
      )
      .strokeColor("")
      .color((d: { tag: any; }) => {
        switch (d.tag) {
          case "vacant":
            return "#EB6C00";
          case "packed":
            return "#34405F";
          case "residentials":
            return "#818FB5";
          case "non-residentials":
            return "#4C5D8B";
          default:
            return "#000000";
        }
      });

    // Mount chart
    myChart(container);

    // Cleanup function
    return () => {
      container.innerHTML = "";
    };
  }, [occupiedData]);

[coreymunn3]

I would suggest following the solutions in Issue #85 and #100 - you don't need to manually set innerHTML