IcicleChart

Rectangular partition: the open node fills the first band and each band after it splits its parent by value. Drill-down zooms the clicked cell to the full extent with an animated transition, like the sunburst.

Import

import { IcicleChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/icicle-chart.

Usage

<IcicleChart
  title="Ingresos por sede, barbero y servicio"
  data={revenueByBranch}
  valueFormat="currency"
  orientation="horizontal"
  height={360}
  levels={3}
  drillDown
  breadcrumb
  legend
  tooltip
  gap={2}
  radius={4}
  sort
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
title *	string		Accessible name of the drawing and caption of the data table.
data *	HierarchyDatum		Root of the tree; it fills the first band.
height	number | "fill"	340	Height of the drawing in pixels.
aspectRatio	number		Width / height ratio; sizes the drawing from the container width when height is not “fill”.
orientation	"horizontal" | "vertical"	"horizontal"	“horizontal”: levels run left to right; “vertical”: top to bottom.
valueFormat	ValueFormat
levels	number	3	Bands shown after the open node.
drillDown	boolean	true	Click a cell to zoom into it, the first band (or Escape) to zoom out.
breadcrumb	boolean	true
legend	boolean	true	Read-only legend of the open level’s branches.
tooltip	boolean	true
gap	number	2	Gap between cells in pixels.
radius	number	4
sort	boolean	true
animate	boolean	true
loading	boolean
labels	Partial<HierarchyLabels>
onFocusChange	((node: HierarchyNode) => void)
onNodeClick	((node: HierarchyNode) => void)		Click on a cell that cannot be opened (a leaf).
className	string

* marks a required prop.

Storybook stories

• Default
• Vertical
• Two Levels
• Drilldown
• Loading
• Empty
• Narrow

Source

packages/ui/src/charts/icicle-chart/icicle-chart.tsx