What event signals that the chart is finished rendering?

[kindunq]

Question

I searched for I thought I was using "frameended", but I'm not.

If it's a word cloud chart, it's called as many times as there are words.

Am I using it wrong?

 const drawChart = useCallback(() => {
    if (id) {
      root.current = am5.Root.new(`wordCloud_${id}`);

      const container = root.current.container.children.push(
        am5.Container.new(root.current, {
          width: am5.percent(100),
          height: am5.percent(100),
          layout: root.current.verticalLayout,
        })
      );

      root.current.events.on("frameended", readyFunction); <===== issue

      series.data.setAll(search);
    }
  }, [id, themes, search, color, selected]);

  useEffect(() => {
    if (root.current) root.current.dispose();
    drawChart();

    return () => {
      if (root.current) {
        root.current.dispose();
        root.current = null;
      }
    };
  }, [drawChart, id]);

Environment (if applicable)

Additional context

[martynasma]

There is no specific event to mark completion of WordCloud rendering.

The only workaround I can think of is to use frameended event. You can debounce the handler so it does not kick in until framended events stop triggering, e.g.:

var to;
root.events.on("frameended", () => {
  if (to) {
    clearTimeout(to);
  }
  to = setTimeout(() => {
    readyFunction();
  }, 500);
});