I am using wx-react-gantt to render a Gantt chart in a React application. The chart renders correctly initially, but when zooming the timeline (Ctrl + mouse wheel), dependency links become duplicated.
Expected behavior
When zooming in or out, dependency links should recalculate their positions and redraw once, remaining responsive to the new timeline scale.
Only one link per dependency should exist.
Actual behavior
After zooming:
The original dependency line remains visible.
A new dependency line is drawn.
The old line becomes static and no longer responds to zoom/scroll.
The new line behaves correctly.
This results in two overlapping dependency lines.
Reloading the page removes the duplicate until zoom is triggered again.
Example link structure
{
id: "1",
source: "task1",
target: "task2",
type: "e2s"
}
Gantt component setup
<Gantt
apiRef={apiRef}
tasks={tasks}
links={links}
zoom={true}
autoScale={true}
/>
Observations
Tasks render correctly.
Links render correctly on initial load.
Duplication occurs only after zooming.
It appears the previous link SVG paths are not cleared before new ones are drawn.
Question
Is there a recommended way to refresh or redraw links when zoom changes?
For example:
Should the chart be manually refreshed after zoom?
Is there an API method to re-render the links layer?
Is this expected behavior when zoom={true} is enabled?
