Charts · Hierarchies & dimensions

TreeChart

A tidy node-link tree. Family: Hierarchies & dimensions · chart 52 of 60.

City budget
node	amount
City budget	69,364
City budget › Public works	19,197, 27.7% of City budget
City budget › Public works › Roads	2,150, 11.2% of Public works
City budget › Public works › Roads › Roads: staff	1,760, 81.9% of Roads
City budget › Public works › Roads › Roads: materials	390, 18.1% of Roads
City budget › Public works › Bridges	6,154, 32.1% of Public works
City budget › Public works › Water mains	2,878, 15% of Public works
City budget › Public works › Water mains › Water mains: staff	2,069, 71.9% of Water mains
City budget › Public works › Water mains › Water mains: materials	809, 28.1% of Water mains
City budget › Public works › Street lighting	8,015, 41.8% of Public works
City budget › Parks	10,626, 15.3% of City budget
City budget › Parks › Playgrounds	5,030, 47.3% of Parks
City budget › Parks › Playgrounds › Playgrounds: staff	2,165, 43% of Playgrounds
City budget › Parks › Playgrounds › Playgrounds: materials	2,865, 57% of Playgrounds
City budget › Parks › Tree care	2,835, 26.7% of Parks
City budget › Parks › Sports fields	2,761, 26% of Parks
City budget › Parks › Sports fields › Sports fields: staff	2,455, 88.9% of Sports fields
City budget › Parks › Sports fields › Sports fields: materials	306, 11.1% of Sports fields
City budget › Safety	13,294, 19.2% of City budget
City budget › Safety › Fire service	1,805, 13.6% of Safety
City budget › Safety › Lifeguards	5,224, 39.3% of Safety
City budget › Safety › Lifeguards › Lifeguards: staff	2,271, 43.5% of Lifeguards
City budget › Safety › Lifeguards › Lifeguards: materials	2,953, 56.5% of Lifeguards
City budget › Safety › Emergency planning	6,265, 47.1% of Safety
City budget › Culture	7,636, 11% of City budget
City budget › Culture › Libraries	3,177, 41.6% of Culture
City budget › Culture › Libraries › Libraries: staff	912, 28.7% of Libraries
City budget › Culture › Libraries › Libraries: materials	2,265, 71.3% of Libraries
City budget › Culture › Museum	2,999, 39.3% of Culture
City budget › Culture › Festivals	1,460, 19.1% of Culture
City budget › Culture › Festivals › Festivals: staff	1,275, 87.3% of Festivals
City budget › Culture › Festivals › Festivals: materials	185, 12.7% of Festivals
City budget › Administration	18,611, 26.8% of City budget
City budget › Administration › Payroll	6,768, 36.4% of Administration
City budget › Administration › Records	3,591, 19.3% of Administration
City budget › Administration › Records › Records: staff	3,281, 91.4% of Records
City budget › Administration › Records › Records: materials	310, 8.6% of Records
City budget › Administration › IT services	8,252, 44.3% of Administration

Report an issue with this chart

City budget
node	amount
City budget	69,364
City budget › Public works	19,197, 27.7% of City budget
City budget › Public works › Roads	2,150, 11.2% of Public works
City budget › Public works › Roads › Roads: staff	1,760, 81.9% of Roads
City budget › Public works › Roads › Roads: materials	390, 18.1% of Roads
City budget › Public works › Bridges	6,154, 32.1% of Public works
City budget › Public works › Water mains	2,878, 15% of Public works
City budget › Public works › Water mains › Water mains: staff	2,069, 71.9% of Water mains
City budget › Public works › Water mains › Water mains: materials	809, 28.1% of Water mains
City budget › Public works › Street lighting	8,015, 41.8% of Public works
City budget › Parks	10,626, 15.3% of City budget
City budget › Parks › Playgrounds	5,030, 47.3% of Parks
City budget › Parks › Playgrounds › Playgrounds: staff	2,165, 43% of Playgrounds
City budget › Parks › Playgrounds › Playgrounds: materials	2,865, 57% of Playgrounds
City budget › Parks › Tree care	2,835, 26.7% of Parks
City budget › Parks › Sports fields	2,761, 26% of Parks
City budget › Parks › Sports fields › Sports fields: staff	2,455, 88.9% of Sports fields
City budget › Parks › Sports fields › Sports fields: materials	306, 11.1% of Sports fields
City budget › Safety	13,294, 19.2% of City budget
City budget › Safety › Fire service	1,805, 13.6% of Safety
City budget › Safety › Lifeguards	5,224, 39.3% of Safety
City budget › Safety › Lifeguards › Lifeguards: staff	2,271, 43.5% of Lifeguards
City budget › Safety › Lifeguards › Lifeguards: materials	2,953, 56.5% of Lifeguards
City budget › Safety › Emergency planning	6,265, 47.1% of Safety
City budget › Culture	7,636, 11% of City budget
City budget › Culture › Libraries	3,177, 41.6% of Culture
City budget › Culture › Libraries › Libraries: staff	912, 28.7% of Libraries
City budget › Culture › Libraries › Libraries: materials	2,265, 71.3% of Libraries
City budget › Culture › Museum	2,999, 39.3% of Culture
City budget › Culture › Festivals	1,460, 19.1% of Culture
City budget › Culture › Festivals › Festivals: staff	1,275, 87.3% of Festivals
City budget › Culture › Festivals › Festivals: materials	185, 12.7% of Festivals
City budget › Administration	18,611, 26.8% of City budget
City budget › Administration › Payroll	6,768, 36.4% of Administration
City budget › Administration › Records	3,591, 19.3% of Administration
City budget › Administration › Records › Records: staff	3,281, 91.4% of Records
City budget › Administration › Records › Records: materials	310, 8.6% of Records
City budget › Administration › IT services	8,252, 44.3% of Administration

mode="precision"

City budget
node	amount
City budget	69,364
City budget › Public works	19,197, 27.7% of City budget
City budget › Public works › Roads	2,150, 11.2% of Public works
City budget › Public works › Roads › Roads: staff	1,760, 81.9% of Roads
City budget › Public works › Roads › Roads: materials	390, 18.1% of Roads
City budget › Public works › Bridges	6,154, 32.1% of Public works
City budget › Public works › Water mains	2,878, 15% of Public works
City budget › Public works › Water mains › Water mains: staff	2,069, 71.9% of Water mains
City budget › Public works › Water mains › Water mains: materials	809, 28.1% of Water mains
City budget › Public works › Street lighting	8,015, 41.8% of Public works
City budget › Parks	10,626, 15.3% of City budget
City budget › Parks › Playgrounds	5,030, 47.3% of Parks
City budget › Parks › Playgrounds › Playgrounds: staff	2,165, 43% of Playgrounds
City budget › Parks › Playgrounds › Playgrounds: materials	2,865, 57% of Playgrounds
City budget › Parks › Tree care	2,835, 26.7% of Parks
City budget › Parks › Sports fields	2,761, 26% of Parks
City budget › Parks › Sports fields › Sports fields: staff	2,455, 88.9% of Sports fields
City budget › Parks › Sports fields › Sports fields: materials	306, 11.1% of Sports fields
City budget › Safety	13,294, 19.2% of City budget
City budget › Safety › Fire service	1,805, 13.6% of Safety
City budget › Safety › Lifeguards	5,224, 39.3% of Safety
City budget › Safety › Lifeguards › Lifeguards: staff	2,271, 43.5% of Lifeguards
City budget › Safety › Lifeguards › Lifeguards: materials	2,953, 56.5% of Lifeguards
City budget › Safety › Emergency planning	6,265, 47.1% of Safety
City budget › Culture	7,636, 11% of City budget
City budget › Culture › Libraries	3,177, 41.6% of Culture
City budget › Culture › Libraries › Libraries: staff	912, 28.7% of Libraries
City budget › Culture › Libraries › Libraries: materials	2,265, 71.3% of Libraries
City budget › Culture › Museum	2,999, 39.3% of Culture
City budget › Culture › Festivals	1,460, 19.1% of Culture
City budget › Culture › Festivals › Festivals: staff	1,275, 87.3% of Festivals
City budget › Culture › Festivals › Festivals: materials	185, 12.7% of Festivals
City budget › Administration	18,611, 26.8% of City budget
City budget › Administration › Payroll	6,768, 36.4% of Administration
City budget › Administration › Records	3,591, 19.3% of Administration
City budget › Administration › Records › Records: staff	3,281, 91.4% of Records
City budget › Administration › Records › Records: materials	310, 8.6% of Records
City budget › Administration › IT services	8,252, 44.3% of Administration

substrate="green"

City budget
node	amount
City budget	69,364
City budget › Public works	19,197, 27.7% of City budget
City budget › Public works › Roads	2,150, 11.2% of Public works
City budget › Public works › Roads › Roads: staff	1,760, 81.9% of Roads
City budget › Public works › Roads › Roads: materials	390, 18.1% of Roads
City budget › Public works › Bridges	6,154, 32.1% of Public works
City budget › Public works › Water mains	2,878, 15% of Public works
City budget › Public works › Water mains › Water mains: staff	2,069, 71.9% of Water mains
City budget › Public works › Water mains › Water mains: materials	809, 28.1% of Water mains
City budget › Public works › Street lighting	8,015, 41.8% of Public works
City budget › Parks	10,626, 15.3% of City budget
City budget › Parks › Playgrounds	5,030, 47.3% of Parks
City budget › Parks › Playgrounds › Playgrounds: staff	2,165, 43% of Playgrounds
City budget › Parks › Playgrounds › Playgrounds: materials	2,865, 57% of Playgrounds
City budget › Parks › Tree care	2,835, 26.7% of Parks
City budget › Parks › Sports fields	2,761, 26% of Parks
City budget › Parks › Sports fields › Sports fields: staff	2,455, 88.9% of Sports fields
City budget › Parks › Sports fields › Sports fields: materials	306, 11.1% of Sports fields
City budget › Safety	13,294, 19.2% of City budget
City budget › Safety › Fire service	1,805, 13.6% of Safety
City budget › Safety › Lifeguards	5,224, 39.3% of Safety
City budget › Safety › Lifeguards › Lifeguards: staff	2,271, 43.5% of Lifeguards
City budget › Safety › Lifeguards › Lifeguards: materials	2,953, 56.5% of Lifeguards
City budget › Safety › Emergency planning	6,265, 47.1% of Safety
City budget › Culture	7,636, 11% of City budget
City budget › Culture › Libraries	3,177, 41.6% of Culture
City budget › Culture › Libraries › Libraries: staff	912, 28.7% of Libraries
City budget › Culture › Libraries › Libraries: materials	2,265, 71.3% of Libraries
City budget › Culture › Museum	2,999, 39.3% of Culture
City budget › Culture › Festivals	1,460, 19.1% of Culture
City budget › Culture › Festivals › Festivals: staff	1,275, 87.3% of Festivals
City budget › Culture › Festivals › Festivals: materials	185, 12.7% of Festivals
City budget › Administration	18,611, 26.8% of City budget
City budget › Administration › Payroll	6,768, 36.4% of Administration
City budget › Administration › Records	3,591, 19.3% of Administration
City budget › Administration › Records › Records: staff	3,281, 91.4% of Records
City budget › Administration › Records › Records: materials	310, 8.6% of Records
City budget › Administration › IT services	8,252, 44.3% of Administration

ground="cyanotype"

Example

The chart above, in each framework. Pick a framework once and every example on the site follows it.

shell

npm install @silverpoint/react @silverpoint/grounds @silverpoint/fonts

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { TreeChart } from '@silverpoint/react/tree-chart';

const data = [
  { id: 'budget', parent: null, name: 'City budget' },
  { id: 'works', parent: 'budget', name: 'Public works' },
  { id: 'works-01', parent: 'works', name: 'Roads' },
  { id: 'works-01-a', parent: 'works-01', name: 'Roads: staff', amount: 1760 },
  { id: 'works-01-b', parent: 'works-01', name: 'Roads: materials', amount: 390 },
  { id: 'works-02', parent: 'works', name: 'Bridges', amount: 6154 },
  { id: 'works-03', parent: 'works', name: 'Water mains' },
  { id: 'works-03-a', parent: 'works-03', name: 'Water mains: staff', amount: 2069 },
  { id: 'works-03-b', parent: 'works-03', name: 'Water mains: materials', amount: 809 },
  { id: 'works-04', parent: 'works', name: 'Street lighting', amount: 8015 },
  { id: 'parks', parent: 'budget', name: 'Parks' },
  { id: 'parks-05', parent: 'parks', name: 'Playgrounds' },
  // … 26 more rows of the same shape
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <TreeChart
        data={data}
        idKey="id"
        parentKey="parent"
        labelKey="name"
        valueKey="amount"
        title="City budget"
      />
    </div>
  );
}

shell

npm install @silverpoint/vue @silverpoint/grounds @silverpoint/fonts

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { SpTreeChart } from '@silverpoint/vue/tree-chart';

const data = [
  { id: 'budget', parent: null, name: 'City budget' },
  { id: 'works', parent: 'budget', name: 'Public works' },
  { id: 'works-01', parent: 'works', name: 'Roads' },
  { id: 'works-01-a', parent: 'works-01', name: 'Roads: staff', amount: 1760 },
  { id: 'works-01-b', parent: 'works-01', name: 'Roads: materials', amount: 390 },
  { id: 'works-02', parent: 'works', name: 'Bridges', amount: 6154 },
  { id: 'works-03', parent: 'works', name: 'Water mains' },
  { id: 'works-03-a', parent: 'works-03', name: 'Water mains: staff', amount: 2069 },
  { id: 'works-03-b', parent: 'works-03', name: 'Water mains: materials', amount: 809 },
  { id: 'works-04', parent: 'works', name: 'Street lighting', amount: 8015 },
  { id: 'parks', parent: 'budget', name: 'Parks' },
  { id: 'parks-05', parent: 'parks', name: 'Playgrounds' },
  // … 26 more rows of the same shape
];
</script>

<template>
  <div style="width: 480px">
    <SpTreeChart
      :data="data"
      id-key="id"
      parent-key="parent"
      label-key="name"
      value-key="amount"
      title="City budget"
    />
  </div>
</template>

shell

npm install @silverpoint/angular @silverpoint/grounds @silverpoint/fonts

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';

import { Component } from '@angular/core';
import { SpTreeChart } from '@silverpoint/angular/tree-chart';

@Component({
  selector: 'app-root',
  imports: [SpTreeChart],
  template: `
    <div style="width: 480px">
      <sp-tree-chart
        [data]="data"
        idKey="id"
        parentKey="parent"
        labelKey="name"
        valueKey="amount"
        title="City budget"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { id: 'budget', parent: null, name: 'City budget' },
    { id: 'works', parent: 'budget', name: 'Public works' },
    { id: 'works-01', parent: 'works', name: 'Roads' },
    { id: 'works-01-a', parent: 'works-01', name: 'Roads: staff', amount: 1760 },
    { id: 'works-01-b', parent: 'works-01', name: 'Roads: materials', amount: 390 },
    { id: 'works-02', parent: 'works', name: 'Bridges', amount: 6154 },
    { id: 'works-03', parent: 'works', name: 'Water mains' },
    { id: 'works-03-a', parent: 'works-03', name: 'Water mains: staff', amount: 2069 },
    { id: 'works-03-b', parent: 'works-03', name: 'Water mains: materials', amount: 809 },
    { id: 'works-04', parent: 'works', name: 'Street lighting', amount: 8015 },
    { id: 'parks', parent: 'budget', name: 'Parks' },
    { id: 'parks-05', parent: 'parks', name: 'Playgrounds' },
    // … 26 more rows of the same shape
  ];
}

shell

pip install reflex-silverpoint-react

python

import reflex as rx
from reflex_silverpoint_react import tree_chart

DATA = [
    {"id": "budget", "parent": None, "name": "City budget"},
    {"id": "works", "parent": "budget", "name": "Public works"},
    {"id": "works-01", "parent": "works", "name": "Roads"},
    {"id": "works-01-a", "parent": "works-01", "name": "Roads: staff", "amount": 1760},
    {"id": "works-01-b", "parent": "works-01", "name": "Roads: materials", "amount": 390},
    {"id": "works-02", "parent": "works", "name": "Bridges", "amount": 6154},
    {"id": "works-03", "parent": "works", "name": "Water mains"},
    {"id": "works-03-a", "parent": "works-03", "name": "Water mains: staff", "amount": 2069},
    {"id": "works-03-b", "parent": "works-03", "name": "Water mains: materials", "amount": 809},
    {"id": "works-04", "parent": "works", "name": "Street lighting", "amount": 8015},
    {"id": "parks", "parent": "budget", "name": "Parks"},
    {"id": "parks-05", "parent": "parks", "name": "Playgrounds"},
    # … 26 more rows of the same shape
]


def index() -> rx.Component:
    return rx.box(
        tree_chart(
            data=DATA,
            id_key="id",
            parent_key="parent",
            label_key="name",
            value_key="amount",
            title="City budget",
        ),
        width="480px",
    )


app = rx.App()
app.add_page(index)

Import

Each chart has its own subpath, so a bundle only carries the charts it uses. Every adapter also exports every chart from its barrel.

Framework	Import
React	`import { TreeChart } from '@silverpoint/react/tree-chart';`
Vue	`import { SpTreeChart } from '@silverpoint/vue/tree-chart';`
Angular	`import { SpTreeChart } from '@silverpoint/angular/tree-chart'; // <sp-tree-chart>`
Reflex	`from reflex_silverpoint_react import tree_chart`

Props

The props TreeChart adds to the ones every chart takes. Accessor props (…Key, keys, names) name fields of your rows and are ignored without data.

React / Angular	Vue	Reflex	Type	Description
`idKey`	`id-key`	`id_key`	`Accessor<string>`	—
`parentKey`	`parent-key`	`parent_key`	`Accessor<string \| null \| undefined>`	`null` for the root.
`labelKey`	`label-key`	`label_key`	`Accessor<string \| null \| undefined>`	—
`valueKey`	`value-key`	`value_key`	`Accessor<number \| null \| undefined>`	—
`orientation`	`orientation`	`orientation`	`'horizontal' \| 'vertical'`	—

Common props

Every chart also takes these. Framework conventions: camelCase in React and Angular, kebab-case in Vue templates, snake_case in Reflex. Read more about them.

Show the 22 common props

React / Angular	Vue	Reflex	Type	Description
`data`	`data`	`data`	`readonly Datum[]`	Rows to draw. If omitted, the demo dataset is rendered (REQ-093) and the accessor props (`…_key`, `keys`, `names`) are ignored.
`ground`	`ground`	`ground`	`GroundRef`	Style ground: `silverpoint` or `cyanotype`, or a ground object. Defaults to the app provider's, or `silverpoint`.
`substrate`	`substrate`	`substrate`	`SubstrateName`	Prepared substrate within the ground (REQ-046).
`mode`	`mode`	`mode`	`InkMode`	`ink` by default; `precision` disables inking (REQ-021).
`seed`	`seed`	`seed`	`Seed`	Seed. If omitted, it is derived from `id` stably (REQ-003).
`id`	`id`	`id`	`string`	Stable identifier. If omitted, it is generated deterministically.
`height`	`height`	`height`	`number`	Height of the drawing area in px. Width is the container's unless pinned.
`width`	`width`	`width`	`number`	—
`chrome`	`chrome`	`chrome`	`'card' \| 'bare'`	`card` draws the full frame; `bare` only the drawing area (REQ-095).
`hatchFill`	`hatch-fill`	`hatch_fill`	`'tile' \| 'per-shape'`	How areas are filled (REQ-029).
`title`	`title`	`title`	`string`	—
`badge`	`badge`	`badge`	`string`	—
`value`	`value`	`value`	`string \| number`	—
`unit`	`unit`	`unit`	`string`	—
`footerLeft`	`footer-left`	`footer_left`	`string`	—
`footerRight`	`footer-right`	`footer_right`	`string`	—
`label`	`label`	`label`	`string`	Accessible name. If omitted, it is derived from `title` (REQ-120).
`description`	`description`	`description`	`string`	Long description for screen readers (REQ-120).
`dataTable`	`data-table`	`data_table`	`'visible' \| 'hidden' \| 'none'`	Tabular alternative; `hidden` leaves it for assistive technology only (REQ-121).
`locale`	`locale`	`locale`	`string`	—
`numberFormat`	`number-format`	`number_format`	`Intl.NumberFormatOptions`	—
`className`	`class-name`	`class_name`	`string`	—

Pointer and keyboard exploration are built in. The item under the pointer or focus is reported, and a click, Enter or Space selects it. The item is { seriesKey, index, datum, value, point: { x, y } }.

Framework	Active item	Selection	Custom readout
React	`onActiveChange`	`onSelect`	`tooltip={(item, readout) => …}`
Vue	`@active-change`	`@select`	`<template #tooltip>`
Angular	`(activeChange)`	`(select)`	`<ng-template spTooltip>`
Reflex	`on_active_change`	`on_select`	`tooltip=tooltip_template(…)`

Interaction and readouts →

Report it

Found something wrong with TreeChart? Open an issue on GitHub — the form comes pre-filled with the chart and the version.

TreeChart

Example

Import

Props

Common props

Events