HierarchyMorph

One hierarchy, two views. Switching between treemap rectangles and sunburst rings morphs every shape: each is sampled as a polygon in both layouts and the points glide from one to the other, so the eye follows a branch instead of re-reading the chart.

Import

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

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

Usage

<HierarchyMorph
  title="Ventas por categoría y servicio"
  data={sales}
  valueFormat="currency"
  defaultMode="treemap"
  levels={2}
  showSwitch
  height={400}
  gap={2}
  sort
  tooltip
  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; its total is shown in the tooltip share.
mode	"treemap" | "sunburst"		Controlled view.
defaultMode	"treemap" | "sunburst"	"treemap"	Initial view when uncontrolled.
onModeChange	((mode: HierarchyMorphMode) => void)
levels	1 | 2	2	Levels drawn below the root (1 or 2).
showSwitch	boolean	true	Hide the built-in switch (drive mode from outside).
height	number | "fill"	380
aspectRatio	number		Width / height ratio; sizes the drawing from the container width when height is not “fill”.
valueFormat	ValueFormat
gap	number	2	Gap between shapes in pixels.
sort	boolean	true
tooltip	boolean	true
animate	boolean	true	Morph duration in ms; 0 or false swaps instantly.
loading	boolean
labels	Partial<HierarchyMorphLabels>
className	string

* marks a required prop.

Storybook stories

• Default
• Starts As Sunburst
• One Level
• Controlled
• Loading
• Empty
• Narrow

Source

packages/ui/src/charts/hierarchy-morph/hierarchy-morph.tsx