Collapsible Force-Directed Tree
Force Directed Tree is a special kind of chart used to display of multi-item data related in hierarchical, linear or mixed way, as a series of linked bubbles.
This demo shows how to implement collapsing and expanding of tree nodes in a force-directed tree.
For a deep dive into force-directed tree charts check out the Force-directed tree docs.
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 collapsible force-directed tree chart that visualizes hierarchical data as interconnected bubbles using physics-based simulation. Use a tea/coffee flavor wheel dataset with a root node branching into major categories (e.g., Flora, Fruity, Sour/Fermented, Green/Vegetative, Roasted, Spices, Nutty/Cocoa, Sweet), each with subcategories and leaf nodes with numeric values. Nodes should be rendered as colored circles positioned by force-directed physics with repulsion and centering forces. Apply a color gradient across hierarchy levels. Links between parent and child nodes should have moderate connection strength. The tree should start collapsed showing only the root and first-level categories. Clicking a node should expand or collapse its children with smooth animation. Animate the initial appearance on load. Use amCharts 5 library.
Demo source