chart gallery
Hierarchy Charts: Tree, Packed Circles, Voronoi
Four ways to draw a hierarchy, all read from the same parent column, path column or grouping. Each is live, bound to a grid, and shown with its code.
Force-directed tree chart
A force-directed tree draws a hierarchy as a graph whose only links run from parent to child. The root sits in the centre and the branches settle around it, then stop, so the picture is calm rather than endlessly moving. It is a friendlier way to show an organisation, a folder structure or a product catalogue than a rigid diagram, because you can fold a branch with a click and drag any node out of the way. Node size follows a measure such as head count, and a click selects the rows at or beneath the node.
Try it. Click a branch to fold it, drag a node to move it, and select a row in the grid to see where it sits.
The code
createChart({
grid,
container,
type: 'forceTree',
parentId: 'boss',
label: 'name',
y: 'heads',
selection: true,
title: 'People by team',
});Options used:
type: 'forceTree', parentId, selection
Sample data
({
columns: [
{ field: 'name', title: 'Team' },
{ field: 'boss', title: 'Reports to' },
{ field: 'heads', title: 'People', type: 'number' },
],
rows: [
{ id: 'ceo', boss: '', name: 'Executive', heads: 3 },
{ id: 'eng', boss: 'ceo', name: 'Engineering', heads: 4 },
{ id: 'web', boss: 'eng', name: 'Web', heads: 9 },
{ id: 'data', boss: 'eng', name: 'Data', heads: 5 },
{ id: 'mob', boss: 'eng', name: 'Mobile', heads: 6 },
{ id: 'ops', boss: 'ceo', name: 'Operations', heads: 3 },
{ id: 'infra', boss: 'ops', name: 'Infra', heads: 7 },
{ id: 'supp', boss: 'ops', name: 'Support', heads: 8 },
{ id: 'fin', boss: 'ceo', name: 'Finance', heads: 2 },
{ id: 'pay', boss: 'fin', name: 'Payroll', heads: 3 },
{ id: 'bill', boss: 'fin', name: 'Billing', heads: 4 },
],
})Packed circles chart
A packed circles chart draws a hierarchy as circles inside circles. A leaf’s area is proportional to its value, and a branch is the circle that holds its children, so the biggest contributors stand out at a glance without a single axis. It is a good choice when you want a whole organisation, portfolio or spend breakdown in one compact view that a reader can explore: a click zooms into a branch and another click zooms back out. Siblings never overlap, the packing is the same every time for the same rows, and a click can select the rows behind a circle.
Try it. Click a circle to zoom into it, and click the circle that fills the view to zoom back out.
The code
createChart({
grid,
container,
type: 'pack',
parentId: 'boss',
label: 'name',
y: 'heads',
padding: 6,
selection: true,
title: 'People by team',
});Options used:
type: 'pack', parentId, padding
Sample data
({
columns: [
{ field: 'name', title: 'Team' },
{ field: 'boss', title: 'Reports to' },
{ field: 'heads', title: 'People', type: 'number' },
],
rows: [
{ id: 'ceo', boss: '', name: 'Executive', heads: 3 },
{ id: 'eng', boss: 'ceo', name: 'Engineering', heads: 4 },
{ id: 'web', boss: 'eng', name: 'Web', heads: 9 },
{ id: 'data', boss: 'eng', name: 'Data', heads: 5 },
{ id: 'mob', boss: 'eng', name: 'Mobile', heads: 6 },
{ id: 'ops', boss: 'ceo', name: 'Operations', heads: 3 },
{ id: 'infra', boss: 'ops', name: 'Infra', heads: 7 },
{ id: 'supp', boss: 'ops', name: 'Support', heads: 8 },
{ id: 'fin', boss: 'ceo', name: 'Finance', heads: 2 },
{ id: 'pay', boss: 'fin', name: 'Payroll', heads: 3 },
{ id: 'bill', boss: 'fin', name: 'Billing', heads: 4 },
],
})Voronoi treemap
A Voronoi treemap fills a circle with organic cells, one per item, nested by branch. It does the job of a treemap with a softer shape, and every cell’s area is fitted to its value, each within one percent of its share of the whole by default. Use it for budgets, portfolios and any breakdown where the proportions matter and a rectangle grid feels heavy. The border between two branches is thicker the higher up the tree they part, so groups read as regions. The same rows always draw the same picture, and a click selects the rows beneath a cell.
Try it. Click a cell to select the rows beneath it in the grid.
The code
createChart({
grid,
container,
type: 'voronoiTreemap',
path: 'team',
y: 'spend',
selection: true,
title: 'Spend by team (k)',
});Options used:
type: 'voronoiTreemap', path, selection
Sample data
({
columns: [
{ field: 'team', title: 'Team' },
{ field: 'spend', title: 'Spend (k)', type: 'number' },
],
rows: [
['Engineering/Web', 420], ['Engineering/Data', 310], ['Engineering/Platform', 280],
['Sales/Enterprise', 350], ['Sales/SMB', 190],
['Marketing/Brand', 120], ['Marketing/Demand', 210],
['Support/Tier 1', 160], ['Support/Tier 2', 90],
['Operations', 140],
].map(([team, spend], i) => ({ id: i, team, spend })),
})Tree chart and dendrogram
A node-link tree lays a hierarchy out as a tidy tree in which no two nodes at a level overlap. Choose top-down, left to right or radial, with straight, elbow or curved links, and switch on the cluster option for a dendrogram with every leaf in one row. It is the classic picture for an organisation, a category tree or a set of groupings. A click folds or opens a branch, labels can carry each node’s value, and a tree too big for the pane can be zoomed with the wheel and panned by dragging.
Try it. Click a node to fold or open its branch.
The code
createChart({
grid,
container,
type: 'tree',
parentId: 'boss',
label: 'name',
y: 'heads',
orientation: 'left-right',
linkShape: 'elbow',
labels: true,
selection: true,
title: 'Reporting lines',
});Options used:
type: 'tree', orientation, linkShape, labels
Sample data
({
columns: [
{ field: 'name', title: 'Team' },
{ field: 'boss', title: 'Reports to' },
{ field: 'heads', title: 'People', type: 'number' },
],
rows: [
{ id: 'ceo', boss: '', name: 'Executive', heads: 3 },
{ id: 'eng', boss: 'ceo', name: 'Engineering', heads: 4 },
{ id: 'web', boss: 'eng', name: 'Web', heads: 9 },
{ id: 'data', boss: 'eng', name: 'Data', heads: 5 },
{ id: 'mob', boss: 'eng', name: 'Mobile', heads: 6 },
{ id: 'ops', boss: 'ceo', name: 'Operations', heads: 3 },
{ id: 'infra', boss: 'ops', name: 'Infra', heads: 7 },
{ id: 'supp', boss: 'ops', name: 'Support', heads: 8 },
{ id: 'fin', boss: 'ceo', name: 'Finance', heads: 2 },
{ id: 'pay', boss: 'fin', name: 'Payroll', heads: 3 },
{ id: 'bill', boss: 'fin', name: 'Billing', heads: 4 },
],
})Every chart type, live → The charts API reference → How a chart binds to a grid →