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.
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.
| Property | Type | Required | Description |
|---|---|---|---|
| type | string | required | Value must be "indented-tree". |
| data | Object | required | Tree data, containing name and optional children fields. |
| data.name | string | required | Node name. |
| data.children | Object[] | optional | Child node array, each child has the same structure, supporting multi-level nesting. |
| direction | 'LR' | 'RL' | 'H' | optional | Layout direction. "LR" root on left (default), "RL" root on right, "H" root centered. |
| title | string | optional | Chart title. |
| theme | 'default' | 'dark' | 'academy' | optional | Chart theme, default is "default". |
| style | Object | optional | Chart style. |
| style.backgroundColor | string | optional | Must be a valid color value. |
| style.palette | string[] | optional | Must be a valid color array. |
