funnel-graph-js icon indicating copy to clipboard operation
funnel-graph-js copied to clipboard

Dynamic Funnel Graph using React

Open faizansdq opened this issue 1 year ago • 2 comments

Hi greghub,

Thanks for building this amazing funnel graph library, this really helps in building funnel graphs easily. I am experiencing the issue while drawing the graph using data from API. I can easily build the graph with static data, issue arises while using dynamic data. I am writing FunnelGraph code within useEffect, where every time data changes the graph should be re-drawn using updated data. And the graph is re-drawn every time the data changes but it keeps overlapping on the previous graph. Is there a method to clear previously drawn graph, so it doesn't overlap on the newly drawn graph? All the React examples that I have seen till now use only static data and only draw once. Please help.

Thanks.

faizansdq avatar Mar 14 '23 09:03 faizansdq

Add a ref the to inner div and in the useEffect before drawing the chart remove all the contents of the div

const funnel = useRef(null)

useEffect(() => {
    funnel.current.innerHTML = ''
    graph.draw
}, [update]

<div class="funnel" ref={funnel} />

Maximillion195 avatar May 02 '23 10:05 Maximillion195

@faizansdq Do you have example code of how you integrated this library into a React component?

vinnie-j avatar Dec 11 '23 20:12 vinnie-j