Icicle Chart
A rectangular partition of hierarchical data where each row represents a level — the linear cousin of the sunburst chart, easier to read and compare precisely.
// 01 — The chart
What it looks like
A three-level icicle chart breaking down company revenue: total → division → product line. Each rectangle’s width is proportional to its revenue.
// 02 — Definition
What is an icicle chart?
An icicle chart (also called a partition chart or flame chart) is a rectangular, space-filling visualization of hierarchical data. Each horizontal row represents a level of the hierarchy, and rectangles within each row are sized proportionally to their values.
Think of it as a sunburst chart unrolled into straight lines. The top row is the root; each subsequent row subdivides the rectangles above it into children. This linear layout makes it much easier to compare sizes precisely, since our eyes are better at judging horizontal widths than arc angles.
Icicle charts are named for their resemblance to icicles hanging from a roof when oriented vertically (top-to-bottom). The same layout oriented bottom-up is sometimes called a flame chart, commonly used in software profiling.
Key insight: The icicle chart uses the same d3.partition() layout as the sunburst but projects it onto a Cartesian (rectangular) coordinate system instead of polar (circular) coordinates. This makes it inherently more readable for precise comparison.
// 03 — Anatomy
Parts of an icicle chart
// 04 — Usage
When to use it — and when not to
- You need precise size comparison of hierarchical categories
- The sunburst version is too hard for your audience to read
- Visualizing budget breakdowns, file system usage, or organizational structures
- You want to label each rectangle with text (more room than arc labels)
- The hierarchy has 2–5 levels with moderate branching
- Data is not hierarchical — use a bar or pie chart
- You have more than 5 levels — the chart becomes too tall with very narrow rectangles
- The audience prefers radial layouts — consider a sunburst instead
- You need to show change over time
- The chart will be very small — labels won't fit in narrow rectangles
// 05 — Reading guide
How to read an icicle chart
Read from top to bottom, like reading an organizational chart.
Start at the top
The root rectangle spans the full width and represents the total. Its label tells you what the entire hierarchy measures.
Read the second row
Each rectangle below the root is a top-level category. Compare their widths to see relative proportions — wider = larger share.
Trace parent-child relationships
Each rectangle in a lower row sits directly below its parent. Follow the vertical alignment to see what each category is composed of.
Compare widths within a row
Rectangles in the same row are directly comparable. This is the icicle chart's key advantage over the sunburst.
Look for narrow slivers
Very thin rectangles indicate small values. If they're too thin to label, hover or click for details in interactive versions.
// 06 — Data format
What data do you need?
Identical to the sunburst: a tree-structured dataset with named nodes and values at leaf nodes.
{
name: "Revenue",
children: [
{ name: "Software", children: [
{ name: "SaaS", value: 54 },
{ name: "License", value: 50 }
]},
{ name: "Services", children: [
{ name: "Consulting", value: 42 },
{ name: "Support", value: 34 }
]}
]
}// 07 — Construction
How to build one
Structure data as a tree with values at leaf nodes.
Use d3.partition() to compute layout coordinates — same as sunburst but projected linearly.
Map x0→x1 to horizontal position (width) and y0→y1 to vertical position (row).
Draw SVG <rect> elements for each node. Add 1–2px gaps between siblings for visual separation.
Label each rectangle with the node name and value. Truncate or hide labels for very narrow rectangles.
// 08 — Common mistakes
Mistakes to watch out for
Too many levels
Each additional row makes the chart taller and individual rectangles thinner. Limit to 3–5 levels.
No gap between siblings
Without small gaps, adjacent rectangles of similar colour merge visually into one block. Always add 1–2px spacing.
Poor labelling
Small rectangles can't fit text. Use tooltips for narrow segments, or aggregate small children into an "Other" node.
Confusing orientation
Top-down (icicle) and bottom-up (flame) orientations have different conventions. Be consistent and label the root clearly.
Inconsistent colour scheme
Colour should group by top-level parent. Using random colours across levels destroys the visual hierarchy.
// 09 — Real-world examples
Where you’ll see it in the wild
Software profiling
Flame charts (inverted icicles) are the standard for CPU profiling in Chrome DevTools, showing call stacks by execution time.
Budget visualization
Government budget breakdowns showing department → program → line item, each row a hierarchy level.
File system analysis
Disk usage tools showing folder → subfolder → file size as cascading rectangles.
Organizational analytics
Company headcount by division → department → team, with width proportional to team size.
// 10 — Quick reference
Key facts at a glance
Partition chart, flame chart (inverted)
Hierarchical part-to-whole with precise comparison
2–5 levels
Horizontal rows, top-to-bottom
D3.js, Observable Plot, Plotly
Sunburst (radial version), Treemap (nested version)
// 11 — Accessibility
Making it accessible
Provide a hierarchical data table as an alternative view
Add ARIA tree-item roles for each rectangle in interactive versions
Ensure text labels have sufficient contrast against rectangle fills
Support keyboard navigation (arrow keys to move between nodes)
Add visible labels on all rectangles wide enough to fit text
// 12 — Variations
Common variations
Flame chart
The inverted version (bottom-up) used in software profiling. The root (total time) is at the bottom, call stacks grow upward.
Horizontal icicle
Columns instead of rows — the root is on the left and children extend rightward. Better for deep hierarchies.
Zoomable icicle
Click a rectangle to zoom in, making it the new full-width root. Essential for exploring large hierarchies.
Colour-coded icicle
Rectangle fill encodes a second dimension (growth rate, status) in addition to the hierarchical structure.
// 13 — FAQs
Frequently asked questions
What is an icicle chart?+
An icicle chart (also called a partition chart or flame chart) is a rectangular, space-filling visualization of hierarchical data. Each horizontal row represents a level of the hierarchy, and rectangles within each row are sized proportionally to their values.
When should you use an icicle chart?+
Use an icicle chart when you need precise size comparison of hierarchical categories. It also works well when the sunburst version is too hard for your audience to read, and when visualizing budget breakdowns, file system usage, or organizational structures.
When should you avoid an icicle chart?+
Avoid an icicle chart when data is not hierarchical — use a bar or pie chart. It is also a poor fit when you have more than 5 levels — the chart becomes too tall with very narrow rectangles, or when the audience prefers radial layouts — consider a sunburst instead.
What data do you need to make an icicle chart?+
Identical to the sunburst: a tree-structured dataset with named nodes and values at leaf nodes.
How is an icicle chart different from a sunburst chart?+
Both an icicle chart and a sunburst chart can look similar at first glance, but they answer different questions. Reach for an icicle chart when the comparisons and patterns it was designed to reveal match what you need to communicate, and choose a sunburst chart when its particular strengths better fit your data and audience.
What is another name for an icicle chart?+
Icicle Chart is also known as Partition chart, flame chart (inverted). The name varies between fields, but the visualisation technique is the same.
What size of dataset works best for an icicle chart?+
Icicle Chart works best for Hierarchical part-to-whole with precise comparison. Outside that range the chart either looks empty or becomes too cluttered to read clearly.
Are icicle charts accessible to screen readers?+
Yes — a icicle chart can be made accessible to screen readers by pairing it with a clear text summary of the key insight, ensuring color choices meet WCAG contrast guidelines, adding descriptive alt text or aria-label to the SVG, and offering the underlying data as an HTML table fallback for assistive technologies.