Hierarchy · Intermediate
Tree
The parent and child links of a hierarchy, drawn as dots joined by curves.
- Use when
- The structure itself is the point: an org chart, a folder or dependency tree, what an outage reaches, a decision tree
- Avoid when
- Each part's share of the total matters more than the links (treemap or sunburst), or the leaves are thousands of items to compare by size
Try it
42
Tree
Screens that call the payments API, by service
Hover over the chart, or Tab in and use the arrow keys to move between items. The numbers are sample data.
Variants
Named looks for this chart. Each one is the example above with a few options or fields changed. The CLI (ztd-charts example tree --variant <id>) and the MCP server know the same names.
Radial
Screens that call the payments API, by service
Sized by value, largest first
Screens that call the payments API, by service
Code
Tree.tsx
import { ChartCard, Tree } from "ztd-charts";
const data = [
{"service":"Orders","screen":"Checkout","users":42},
{"service":"Orders","screen":"Cart checkout","users":31},
{"service":"Orders","screen":"One-tap pay","users":18},
{"service":"Orders","screen":"Order history","users":25},
{"service":"Subscriptions","screen":"Start subscription","users":9},
{"service":"Subscriptions","screen":"Renewal","users":12},
// … 17 more rows
];
export function Example() {
return (
<ChartCard number="42" title="Tree" subtitle="Screens that call the payments API, by service" takeaway="A payments outage stops 9 of 23 screens" level="intermediate" replay>
<Tree
data={data}
label="screen"
group="service"
rootLabel="Payments API"
highlight={["Checkout","Cart checkout","One-tap pay","Order history","Start subscription","Renewal","Cancel and refund","Payment methods","Receipts"]}
/>
</ChartCard>
);
}
Props
<Tree> takes these props. Rows marked Common work the same on every chart.
32 props
| Prop |
|---|
dataRequiredAn array of objects. Pass CSV, REST or database rows as they areobject[] |
labelRequiredNode name fieldstring | (d, i) => string |
valueValue field. Sizes the dots; values add up from the leavesstring | (d, i) => number |
groupParent group field (flat rows, as in the treemap)string | (d, i) => string |
idRow id for id/parent rows. Defaults to the labelstring | (d, i) => string |
parentParent id field. Each row is one node, and rows with an empty parent hang under the rootstring | (d, i) => string |
layout"horizontal" puts the root on the left and the leaves on the right, with level labels that read at any width. "radial" puts the root in the center and fits more leaves into a square"horizontal" | "radial"Default "horizontal" |
pathField list for multi-level pathsstring[] |
sortSort siblings largest first by value. Off keeps the data orderbooleanDefault false |
rootLabelName of the root that is added when the data has several top-level nodesstringDefault "All" |
collapsedBranches that start folded, by name or by path such as "Orders/Checkout". Server rendering folds them toostring[] |
heightCommonHeight in px. Without it, each chart picks a default that fits its widthnumber |
widthCommonFixed width in px. Without it, the chart fits its parentnumber |
highlightCommonItem to highlight. An index, a name, an array, or "max" | "min" | "first" | "last" | "none"number | string | (number|string)[] | "max" … |
formatCommonValue format. "number" | "integer" | "percent" (values are already percents: 42 → "42%") | "ratio" (0.42 → "42%") | "compact" | "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) | "decimal" or Intl.NumberFormat options"number" | "percent" | "compact" | … |
unitCommonUnit appended to values. For example "%" or "ms"string |
localeCommonLocale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider localestringDefault "en-US" |
animateCommonEntry and update animationbooleanDefault true |
durationCommonAnimation length (ms)number |
easingCommonMotion curve"spring" | "easeOut" | "easeInOut" | "linear"Default "spring" |
staggerCommonDelay between items as they enter (ms)number |
reducedMotionCommon"auto" follows the OS setting. true always turns motion offanyDefault "auto" |
animateOnViewCommonPlay when the chart scrolls into viewbooleanDefault true |
showLabelsCommonLabels drawn on the chart (values and names)booleanDefault true |
tooltipCommonShow tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left outtooltipDefault true |
syncIdCommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring |
ariaLabelCommonName for screen readersstring |
descriptionCommonDescription for screen readers. Built from the data when omittedstring |
onHoverCommonRuns when hover or keyboard focus moves to another item(e: ChartEvent | null) => void |
onClickCommonRuns on click, Enter or Space(e: ChartEvent) => void |
replayKeyCommonReplays the entry animation when it changesstring | number |
themeCommonChanges theme tokens for this chart onlyPartial<ChartTheme> |