Tree, treemap and sunburst

Trees, treemaps and sunbursts show nested data: how a whole breaks into parts, and those parts into smaller ones.

LLMs

Basic treemap

A treemap series tiles each category by its value, with nested children drawn as smaller tiles inside their parent.

Basic sunburst

A sunburst series draws each level of a family tree as a ring, with labels turned along the radius by rotate: "radial".

Rounded corners

Set itemStyle.borderRadius to round every segment of a sunburst, with an empty center left by the inner radius.

Label rotation

Use levels to give each ring its own color and label.rotate: radial, tangential or a fixed angle.

Monochrome

Paint a gray sunburst and color only chosen segments with itemStyle, so the highlighted paths stand out in one hue.

Treemap to sunburst

Two series sharing an id and universalTransition morph between a treemap and a sunburst every three seconds.

Visual map

A continuous visualMap colors each sunburst segment by its value, while one node keeps its own itemStyle.color.

Left to right

A tree series lays a module hierarchy out from left to right, with every other branch collapsed until you click it.

Right to left

Set orient to RL to grow the tree from the right edge, with leaf labels flipped to the left of their nodes.

Top to bottom

Set orient to vertical to hang the tree from the top, with labels rotated so long names fit between siblings.

Bottom to top

Set orient to BT to grow the tree upward from the bottom, with emphasis.focus lighting a branch on hover.

Elbow links

Set edgeShape to polyline to join parents and children with right-angled links that fork at edgeForkPosition.

Radial tree

Set layout to radial to spread the tree around its root, opened three levels deep by initialTreeDepth.

Multiple trees

Two tree series side by side, each placed with its own left and right, with the legend toggling either one.

Disk usage

A treemap of folders on a disk, with levels setting gaps and colorSaturation per depth and click to drill in.

Parent labels

Turn on upperLabel to print each folder's name in a band above its children, so every level stays readable.

Drill down

Set leafDepth to show two levels at a time, so clicking a tile drills into the next level of the option tree.

Gradient mapping

Map each tile's change from last year to a red, gray and green range with visualDimension and colorMappingBy.

Budget views

Switch a budget treemap between this year, last year and growth, with rich labels showing totals per household.

Reading log

A sunburst with a sort function and glowing outer levels, coloring each book by the rating it was given.

Flavor wheel

A coffee flavor wheel where levels sets each ring's radius and every flavor family keeps one hue across its rings.