Force-Directed Adding Links
Not only can you use amCharts 5 to create amazing force-directed network visuals but you can also use the library as a UI to let users set those links in an engaging visual manner. Try clicking on a node and then click other nodes to link with it.
Key implementation details
We add an event handler for the click event on our nodes. In the handler we select or deselect a node and visually mark it by enabling an outer circle on the selected node. If a node is already selected and some different node is clicked we link or unlink the nodes by calling linkDataItems() or unlinkDataItems() methods of the ForceDirected series.
Related tutorials
Build this chart with AI
The prompt below can be used to build this chart with AI. For best coding results, use the most advanced AI models, like Claude Opus 4.6 and GPT-5.3-Codex. For more info and tips, check out amCharts AI docs.
Create a force-directed network chart where users can interactively add and remove links between nodes by clicking. Display 15 child nodes under a root, each with a name and random values. Node circles should vary in size based on their value, with a visible indicator on selected nodes. Apply a stepped color palette. Configure force simulation so nodes spread out naturally. Implement click interaction: clicking a node selects it, then clicking another node creates or removes a link between them. Clicking an already-selected node deselects it. Links should be clearly visible. No tooltips. Show a pointer cursor on node hover. Enable showing multiple branches simultaneously. Animate with a smooth staggered animation. Use amCharts 5 library.
Demo source