Icicle charts visualize hierarchical data as a partition of rectangular cells. The root occupies the full width at the top, and each level subdivides into children whose widths are proportional to their values. They provide an efficient, space-filling view of deep hierarchies while preserving both the structure and size information.

Subtype

▾

Live Preview

This chart type requires a Pro license.

Please upgrade to unlock advanced visualizations.

{
  "title": {
    "text": "Software Architecture Breakdown"
  },
  "data": [
    {
      "id": "System",
      "parent": null,
      "label": "System",
      "value": 0
    },
    {
      "id": "Frontend",
      "parent": "System",
      "label": "Frontend",
      "value": 0
    },
    {
      "id": "Components",
      "parent": "Frontend",
      "label": "Components",
      "value": 0
    },
    {
      "id": "Button",
      "parent": "Components",
      "label": "Button",
      "value": 8
    },
    {
      "id": "Modal",
      "parent": "Components",
      "label": "Modal",
      "value": 12
    },
    {
      "id": "Table",
      "parent": "Components",
      "label": "Table",
      "value": 15
    },
    {
      "id": "Pages",
      "parent": "Frontend",
      "label": "Pages",
      "value": 0
    },
    {
      "id": "Dashboard",
      "parent": "Pages",
      "label": "Dashboard",
      "value": 22
    },
    {
      "id": "Settings",
      "parent": "Pages",
      "label": "Settings",
      "value": 14
    },
    {
      "id": "Backend",
      "parent": "System",
      "label": "Backend",
      "value": 0
    },
    {
      "id": "API",
      "parent": "Backend",
      "label": "API",
      "value": 0
    },
    {
      "id": "Auth",
      "parent": "API",
      "label": "Auth",
      "value": 18
    },
    {
      "id": "Users",
      "parent": "API",
      "label": "Users",
      "value": 14
    },
    {
      "id": "Products",
      "parent": "API",
      "label": "Products",
      "value": 20
    },
    {
      "id": "Database",
      "parent": "Backend",
      "label": "Database",
      "value": 0
    },
    {
      "id": "Schema",
      "parent": "Database",
      "label": "Schema",
      "value": 10
    },
    {
      "id": "Migrations",
      "parent": "Database",
      "label": "Migrations",
      "value": 6
    }
  ],
  "series": [
    {
      "type": "icicle",
      "nameKey": "id",
      "parentKey": "parent",
      "valueKey": "value",
      "fills": [
        "#6366f1",
        "#8b5cf6",
        "#a78bfa",
        "#c4b5fd"
      ]
    }
  ]
}

Edit JSON above · auto-previews after 0.9 s

A top-down icicle chart breaking down a software architecture from system to module to component.

PreviousCircle Packing Next Dendrograms

Was this article helpful?