Icicle

@nivo/iciclehierarchyflat

The Icicle Chart is a space-filling visualization used to represent hierarchical data. It displays nested structures as stacked rectangles, where each rectangle’s size typically reflects a quantitative value (like count, size, or duration). The chart provides a clear, compact view of tree-like data and allows users to quickly understand parent-child relationships and the relative weight of each node.

Actions Logs
Start interacting with the chart to log actions
Base
readonly Datum[]required

Hierarchical chart data.

PropertyAccessor<Datum, string>optionaldefault:'id'

Id accessor.

PropertyAccessor<Datum, number>optionaldefault:'value'

Value accessor

'top' | 'right' | 'bottom' | 'left'optionaldefault:'bottom'

Chart orientation.

string | (value: number) => string | numberoptional
open editor

Optional formatter for values.

numberrequired

Chart width.

numberrequired

Chart height.

objectoptional
px
px
px
px

Chart margin.

Style
Rect labels
Customization
Interactivity
Motion