CODEWITHSUNDEEP
echarts
damienc11
damienc11

Reputation: 51

How can i stop this onClick event from rerendering the entire treemap echart i have?

How can i stop this onClick event from rerendering the entire treemap echart i have?

I have basically a echarts treemap https://echarts.apache.org/examples/en/editor.html?c=treemap-disk as a functional component in react. I need to be able to apply filters and "grey out" certain tree nodes that dont fit the criteria. This functionality works currently but it rerenders the echart so that the user must restart from the top level and clicktheir way through all the way to the bottom level. How can i avoid the rerendering? This is a similar example i have where clicking the node displays data but also rerenders the chart losing where the node was in the map.


  const onChartClick = params => {
    if (params.treePathInfo.length === 9) {
      setDrawerData(params);
    }
  };
  useEffect(() => {
    props.setDrawerData(drawerData);
  }, [drawerData]);

  const onEvents = {
    click: onChartClick,
  }; ```

Upvotes: 2

Views: 1117

Answers (1)

jc alhinho
jc alhinho

Reputation: 11

you can try to put your chart on useMemo it works for me :

const [dataLoaded, setdataLoaded] = useState(true);

const onChartClick = params => {
    if (params.treePathInfo.length === 9) {
      setDrawerData(params);
    }
  };

  useEffect(() => {
   props.setDrawerData(drawerData);
   setdataLoaded(false)
  }, [drawerData]);

  const onEvents = {
    click: onChartClick,
  }; 


 const MemoChart = useMemo(() => <Charts
        option={option}
        onEvents={onEvents}
    />, [dataLoaded]);

Upvotes: 1

Related Questions