Icicle

@nivo/iciclehierarchy
svghtmlhttp api

An Icicle Chart with zooming ability and keyboard navigation support.

This chart type visualizes hierarchical data using nested rectangles. Each rectangle represents a node, sized by a value like count or duration, making it easy to compare parts of a tree and see their structure at a glance.

roll the dice
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

NodesSortingoptional

Define how to sort the nodes.

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

Optional formatter for values.

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

Chart orientation.

numberoptionaldefault:1
px

Horizontal spacing between nodes.

numberoptionaldefault:1
px

Vertical spacing between nodes.

numberrequired

Chart width for non-responsive component.

numberrequired

Chart height for non-responsive component.

objectoptional
px
px
px
px

Chart margin.

Style
Labels
Customization
Interactivity
Accessibility
Motion
Recipes
Custom node component (html)Keyboard navigationCustom colorsColors from dataCustom tooltipPatterns and gradients