What data format is required?

The tool requires a JSON object containing a root node with 'name', 'value', and optional 'children' arrays for nested levels.

Can I customize the colors?

Yes, you can select from predefined color schemes like Ocean or Forest, or choose 'Custom Colors' to provide your own array of hex codes.

How do I change the chart orientation?

You can toggle between 'Horizontal' (top-to-bottom) and 'Vertical' (left-to-right) orientations in the settings.

What is the maximum depth I can display?

You can set the 'Maximum Depth' parameter between 1 and 10 levels to control how much of the hierarchy is rendered.

Is the chart interactive?

Yes, the generated chart supports hover animations and tooltips to display detailed information for each segment.

Elysia Tools

Navigation

Data Visualization

Icicle Chart Generator

Generate interactive icicle charts for hierarchical data visualization, perfect for displaying tree structures, file systems, and organizational hierarchies

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Inputs

Options are grouped so long tools stay easier to scan.

21 options

ContentPaste or type the main input values.3

Hierarchical DatatextareaRequiredHierarchical data in JSON format with name, value, and optional children arraysChart TitletextOptionalTitle that will be displayed above the chartCustom ColorstextareaOptionalJSON array of hex colors (requires Custom Colors selection)

SettingsAdjust formats, ranges, numbers, and modes.13

Color SchemeselectOptionalValue FormatselectOptionalChart WidthnumberOptionalWidth of the chart in pixels (min: 400, max: 1200)Chart HeightnumberOptionalHeight of the chart in pixels (min: 300, max: 800)Start LevelnumberOptionalStarting level to display (0 = root level)Maximum DepthnumberOptionalMaximum number of levels to displayLabel SizenumberOptionalFont size for labels in pixels (min: 8, max: 16)Padding SizenumberOptionalSpacing between rectangles in pixels (min: 0, max: 10)Border RadiusnumberOptionalCorner radius for rectangles in pixels (min: 0, max: 8)Stroke WidthnumberOptionalBorder width for rectangles in pixels (min: 0, max: 3)Background ColorcolorOptionalBackground color for the chart containerStroke ColorcolorOptionalBorder color for rectanglesChart OrientationselectOptional

TogglesEnable or disable optional behavior.5

Show LabelscheckboxOptionalEnabled when checkedDisplay category names inside rectanglesShow ValuescheckboxOptionalEnabled when checkedDisplay values inside rectanglesShow PercentagescheckboxOptionalEnabled when checkedShow percentages instead of absolute valuesEnable TooltipscheckboxOptionalEnabled when checkedShow detailed information on hoverHover AnimationcheckboxOptionalEnabled when checkedAnimate rectangles on hover

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

Icicle Chart Generator

Run this tool

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. File System Analysis

2. Organizational Hierarchy Visualization

FAQ

Grafana Advanced Application Samples

D3.js Data Visualization Samples

QR Code Samples

ELK Stack Log Analysis Samples

Bar Chart Generator

Bubble Chart Generator

Comparison Bar Chart Generator

Donut Chart Generator

Chart and Diagram Generators

JSON Schema, Mock Data, and API Fixture Generators

JSON to Typed Code Generators (TypeScript, Go, Rust, Kotlin, Java, C#)

JSON Interchange and Format Translation Tools