2

Icicle Chart

PreviousNext

Rectangular hierarchical visualization for nested data.

EngineeringSalesProductOperatio...BackendFronten...Enterpr...Desig...
"use client"

import { IcicleChart } from "@/components/ui/charts"

const data = {
  name: "Company",
  children: [
    {
      name: "Engineering",
      children: [
        { name: "Frontend", value: 25, color: "#1e40af" },
        { name: "Backend", value: 30, color: "#2563eb" },
        { name: "DevOps", value: 15, color: "#3b82f6" },
        { name: "QA", value: 12, color: "#60a5fa" },
      ],
    },
    {
      name: "Product",
      children: [
        { name: "Design", value: 18, color: "#1e40af" },
        { name: "Research", value: 10, color: "#2563eb" },
        { name: "Analytics", value: 8, color: "#3b82f6" },
      ],
    },
    {
      name: "Sales",
      children: [
        { name: "Enterprise", value: 22, color: "#1e40af" },
        { name: "SMB", value: 15, color: "#2563eb" },
        { name: "Partners", value: 10, color: "#3b82f6" },
      ],
    },
    {
      name: "Operations",
      children: [
        { name: "HR", value: 12, color: "#1e40af" },
        { name: "Finance", value: 10, color: "#2563eb" },
        { name: "Legal", value: 5, color: "#3b82f6" },
      ],
    },
  ],
}

export function IcicleChartDemo() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <IcicleChart data={data} orientation="vertical" showLabels />
    </div>
  )
}

About

The Icicle Chart displays hierarchical data as nested rectangles. Unlike treemap which uses area, icicle charts use length to represent values and show hierarchy through horizontal or vertical stacking.

Installation

pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/icicle-chart.json

Usage

import { IcicleChart } from "@/components/ui/charts"
 
const data = {
  name: "Company",
  children: [
    {
      name: "Engineering",
      children: [
        { name: "Frontend", value: 25 },
        { name: "Backend", value: 30 },
      ],
    },
  ],
}
 
export function Example() {
  return <IcicleChart data={data} orientation="vertical" />
}

API Reference

PropTypeDefaultDescription
dataIcicleNoderequiredHierarchical data structure
orientation"horizontal" | "vertical""vertical"Chart orientation
showLabelsbooleantrueShow segment labels
labelMinSizenumber40Minimum size to show labels
paddingnumber1Padding between segments

Notes

  • The icicle chart is ideal for displaying hierarchical data with depth and proportional values
  • Unlike treemaps which use area to represent values, icicle charts use length (width or height)
  • The vertical orientation stacks hierarchy from top to bottom, with parent nodes at the top
  • The horizontal orientation displays hierarchy from left to right, with parent nodes on the left
  • Labels are automatically hidden when segments are too small to accommodate them (controlled by labelMinSize)
  • The component automatically calculates segment sizes based on the sum of child values
  • Padding between segments can be adjusted for visual clarity and separation
  • Hierarchical navigation is naturally represented through the stacked rectangular layout
  • Colors are automatically assigned to different hierarchy levels and branches
  • The chart is particularly effective for organizational structures, file systems, and budget breakdowns