Categories

← View All Tools

Icicle Chart Generator

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

Hierarchical data in JSON format with name, value, and optional children arrays

Title that will be displayed above the chart

JSON array of hex colors (requires Custom Colors selection)

Width of the chart in pixels (min: 400, max: 1200)

Height of the chart in pixels (min: 300, max: 800)

Starting level to display (0 = root level)

Maximum number of levels to display

Font size for labels in pixels (min: 8, max: 16)

Spacing between rectangles in pixels (min: 0, max: 10)

Corner radius for rectangles in pixels (min: 0, max: 8)

Border width for rectangles in pixels (min: 0, max: 3)

Background color for the chart container

Border color for rectangles

Display category names inside rectangles

Display values inside rectangles

Show percentages instead of absolute values

Show detailed information on hover

Animate rectangles on hover

Key Facts

Category
Data Visualization
Input Types
textarea, text, select, number, color, checkbox
Output Type
html
Sample Coverage
4
API Ready
Yes

Overview

The Icicle Chart Generator allows you to create interactive, hierarchical visualizations from your nested JSON data. It is an ideal tool for mapping complex tree structures, such as file systems, organizational hierarchies, or category breakdowns, into clear, space-filling charts that support hover interactions and customizable styling.

When to Use

  • •When you need to visualize the distribution of values across a multi-level hierarchical tree structure.
  • •When you want to explore file system sizes or directory structures in an intuitive, interactive format.
  • •When you need to present organizational charts or nested project budgets where relative proportions are important.

How It Works

  • •Input your hierarchical data in the required JSON format, ensuring each node includes a name and value.
  • •Customize the visual appearance by selecting a color scheme, adjusting chart dimensions, and toggling labels or value displays.
  • •Configure advanced settings like orientation, maximum depth, and border styling to match your specific presentation needs.
  • •Generate the interactive HTML chart to view, hover over segments for details, and analyze your data structure.

Use Cases

Visualizing disk space usage by mapping file and folder sizes into a hierarchical icicle layout.
Displaying corporate department budgets to show how total funding is distributed across sub-teams and projects.
Mapping website navigation structures to identify which content categories consume the most user engagement.

Examples

1. File System Analysis

System Administrator
Background
The administrator needs to identify which sub-directories are consuming the most storage space on a server.
Problem
Large directory trees are difficult to parse in text format, making it hard to spot storage bottlenecks.
How to Use
Input the directory structure as JSON, set the value format to 'Thousands (k)', and use the 'Ocean' color scheme.
Example Config
{"chartTitle": "Server Storage Usage", "valueFormat": "thousands", "colorScheme": "ocean", "chartOrientation": "horizontal"}
Outcome
A clear, interactive chart where the width of each block represents the storage size, allowing for instant identification of large folders.

2. Organizational Hierarchy Visualization

HR Manager
Background
The HR team wants to visualize the headcount distribution across different departments and regional offices.
Problem
Traditional tree diagrams are often cluttered; a space-filling chart is needed for a cleaner overview.
How to Use
Provide the organizational data in JSON, enable 'Show Labels', and set the orientation to 'Vertical'.
Example Config
{"chartTitle": "Global Headcount", "showLabels": true, "chartOrientation": "vertical", "maxDepth": 4}
Outcome
A structured icicle chart that clearly displays the headcount proportions across the entire organization.

Try with Samples

json
Grafana Advanced Application Samples
Comprehensive Grafana samples covering advanced dashboard design, alerting configurations, data source integrations, and plugin development
preferred input family json
json
ELK Stack Log Analysis Samples
Comprehensive ELK Stack (Elasticsearch, Logstash, Kibana) samples for log aggregation, processing, and visualization in distributed systems
preferred input family json
json
D3.js Data Visualization Samples
Comprehensive D3.js data visualization examples including charts, maps, animations, and interactive visualizations
preferred input family json
json
PDF Samples
Generated PDF samples from tools dated 2026-02-01 to 2026-02-10
preferred input family json
json

Related Hubs

Json Generate Tools
Explore 33 json tools for generate workflows and compare closely related utilities quickly.
Json Convert Tools
Explore 100 json tools for convert workflows and compare closely related utilities quickly.
Json Tools
Explore 43 json tools for utility workflows and compare closely related utilities quickly.
Json Format Tools
Explore 6 json tools for format workflows and compare closely related utilities quickly.

FAQ

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.

API Documentation

Request Endpoint

POST /en/api/tools/icicle-chart-generator

Request Parameters

Parameter Name Type Required Description
chartData textarea Yes Hierarchical data in JSON format with name, value, and optional children arrays
chartTitle text No Title that will be displayed above the chart
colorScheme select No -
customColors textarea No JSON array of hex colors (requires Custom Colors selection)
valueFormat select No -
chartWidth number No Width of the chart in pixels (min: 400, max: 1200)
chartHeight number No Height of the chart in pixels (min: 300, max: 800)
startLevel number No Starting level to display (0 = root level)
maxDepth number No Maximum number of levels to display
labelSize number No Font size for labels in pixels (min: 8, max: 16)
paddingSize number No Spacing between rectangles in pixels (min: 0, max: 10)
borderRadius number No Corner radius for rectangles in pixels (min: 0, max: 8)
strokeWidth number No Border width for rectangles in pixels (min: 0, max: 3)
backgroundColor color No Background color for the chart container
strokeColor color No Border color for rectangles
showLabels checkbox No Display category names inside rectangles
showValues checkbox No Display values inside rectangles
showPercentages checkbox No Show percentages instead of absolute values
enableTooltip checkbox No Show detailed information on hover
chartOrientation select No -
hoverAnimation checkbox No Animate rectangles on hover

Response Format

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP Documentation

Add this tool to your MCP server configuration: 

{
  "mcpServers": {
    "elysiatools-icicle-chart-generator": {
      "name": "icicle-chart-generator",
      "description": "Generate interactive icicle charts for hierarchical data visualization, perfect for displaying tree structures, file systems, and organizational hierarchies",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=icicle-chart-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

You can chain multiple tools, e.g.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 tools.

If you encounter any issues, please contact us at [email protected]