icicle

The icicle renders a hierarchy as one band per level, each child cell nested inside its parent's extent along the value axis. It is the sunburst's layout in cartesian coordinates, and it accepts the same data: a native children hierarchy or an existing drilldown config (adapter).

The icicle ships in its own bundle and is not part of the default build. Load it with import ApexCharts from 'apexcharts/icicle', or add dist/icicle.js after the core script tag. See the icicle chart guide for a walkthrough.

Which way the tree grows from the root. 'down' (default) puts the root band on top and each level below its parent. 'up' puts the root at the bottom, which is the flame-graph orientation. 'right' and 'left' grow sideways, which suits long labels because each cell's width is then the band thickness rather than its share of the value axis.

Thickness of one depth band. 'equal' (default) divides the depth axis by the deepest visible level, so the whole tree always fills the plot. A number is a pixel thickness and a '%' string is a share of the depth axis; both keep their thickness through a zoom, which a fixed-height row needs.

How many levels to draw, counting the focused one. 'auto' (default) draws the whole tree: labels hide themselves once a band is thinner than a line of text, so a deep tree degrades to a dense but honest shape. Set a number on a very deep tree, such as a call stack, to keep the top levels readable. Branches cut that way are marked, and clicking one zooms in to reveal them.

Gap between adjacent cells (in px), with the same semantics as plotOptions.pie.spacing. The gaps do most of the work of separating one branch from another, which is why the default tint is 0.

Rounds the corners of each cell (in px), with the same semantics as plotOptions.pie.borderRadius. Defaults to 0 (sharp corners).

How a branch that bottoms out before the deepest level is drawn. 'stop' (default) ends the leaf at its own band and leaves the bands below it empty, so the white space under a branch shows how deep it goes. That stepped silhouette is what makes an icicle readable as a hierarchy. 'extend' stretches the leaf to the far edge instead, which fills the plot and reads more like a treemap.

Note this default is the opposite of plotOptions.sunburst.leaf, which defaults to 'extend' so its outer ring stays solid.

How a parent's extent is split among its children. 'normalize' (default) divides by each child's share of its siblings, which is safe for any data; 'strict' expects children to sum to their parent's value.

Sibling order within a parent. 'none' (default) keeps data order, 'value' is descending by size, and 'name' is alphabetical.

'name' is the flame-graph convention, and the reason is worth knowing: it holds a frame in the same place across profiles, so two runs of the same program can be compared by eye. Ordering by size would move every frame between runs and lose exactly that.

How much lighter each depth level is tinted than its parent colour (0 keeps the parent colour, 1 is white). A per-node color overrides the tint for that cell and its subtree.

Defaults to 0, so a branch carries one hue at every depth and the gaps do the separating, which is what lets the eye follow a branch down. Per-depth shading instead reads as nested boxes, which is a treemap's idiom rather than an icicle's.

Click a cell to zoom into that branch, with a breadcrumb to walk back. Set false to keep the chart static. A click on a cell with nowhere to zoom is ignored.

What a zoom changes, the partition equivalent of chart.zoom.type.

'value' (default) rescales the value axis only: the branch stretches to fill the plot and every level stays exactly where it was, so ancestors remain on screen as context and the reader keeps their bearings. 'both' also re-bands the depth axis, promoting the branch to the top level so its subtree fills the whole plot. That uses the space better at the cost of moving everything.

It is not named 'x' / 'y' because direction swaps which screen axis is which.

Whether to render the label on each cell.

Hide the label on any cell shorter than this (in px) along the reading direction, so narrow cells do not overflow with text.

Label alignment along the reading direction: 'left', 'center' (default) or 'right'. Centred reads as one unit per band. A flame graph usually wants 'left', because a reader scans the left edge of the stack, where a frame lines up with the one that called it.

Whether to turn a label a quarter turn. 'auto' (default) turns it on a cell taller than it is wide, which is where a flat label would be clipped by the band while the value axis still has room. 'always' turns every label for a uniform look, and 'never' keeps them all flat.

A turned label reads across the band thickness rather than along the value axis, so 'always' suits short names and a deep tree, and costs labels on wide shallow bands.

Append each cell's value to its label.

Font size of the cell labels.

Font family of the cell labels.

Font weight of the cell labels.

Array of colors for the cell labels.