GPT-Vis1.3
Skip to examples
Browse chart types
Chart library26 ways to visualize
Start with your own data.SDK quickstart Install the Agent Skill

RELATIONSHIP / CHART GUIDE

Indented Tree

An indented tree represents hierarchical relationships through horizontal indentation.

01 / EXPLORE

See it in action.

Switch to Code to copy an example.

Display hierarchical classification of machine learning modeling methods using an indented tree (official example data structure).

Display a front-end project directory structure using an indented tree, including src, public, and package.json, with components, pages, and utils folders under src.

Display the AI knowledge system classification using an indented tree, including machine learning and deep learning branches and their subcategories.

Display company department hierarchy using an indented tree: the company has a Technology Department (with Front-End, Back-End, and QA teams) and a Product Department.

About Indented Tree

An indented tree represents hierarchical relationships through horizontal indentation. Each element occupies one line, with child nodes indented below their parent, and the progressive indentation visually shows node depth and subordination. It is commonly used for file directory structures, knowledge classification systems, organizational hierarchies, and other scenarios that require a clear display of hierarchical relationships.

02 / CONFIGURE

Make it yours.

The properties available for this chart.

Configuration Options

PropertyTypeRequiredDescription
typestringrequiredValue must be "indented-tree".
dataObjectrequiredTree data, containing name and optional children fields.
data.namestringrequiredNode name.
data.childrenObject[]optionalChild node array, each child has the same structure, supporting multi-level nesting.
direction'LR' | 'RL' | 'H'optionalLayout direction. "LR" root on left (default), "RL" root on right, "H" root centered.
titlestringoptionalChart title.
themeBuiltinThemeName | ThemeSpecoptionalBuilt-in theme name or custom theme object; default is "default". See Documentation → Custom Themes.
styleObjectoptionalChart style.
style.backgroundColorstringoptionalMust be a valid color value.
style.palettestring[]optionalMust be a valid color array.
GPT-Vis · An AntV project · MIT licensed