# Icicle Chart Generator Generate interactive icicle charts for hierarchical data visualization, perfect for displaying tree structures, file systems, and organizational hierarchies > Canonical page: https://elysiatools.com/en/tools/icicle-chart-generator - **Category:** Data Visualization - **Keywords:** icicle chart, hierarchical, tree visualization, treemap, nested data, organizational chart, file system, sunburst ## 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. ## Inputs - **Hierarchical Data** (textarea): Hierarchical data in JSON format with name, value, and optional children arrays - **Chart Title** (text): Title that will be displayed above the chart - **Color Scheme** (select): Select color scheme - **Custom Colors** (textarea): JSON array of hex colors (requires Custom Colors selection) - **Value Format** (select): Select value format - **Chart Width** (number): Width of the chart in pixels (min: 400, max: 1200) - **Chart Height** (number): Height of the chart in pixels (min: 300, max: 800) - **Start Level** (number): Starting level to display (0 = root level) - **Maximum Depth** (number): Maximum number of levels to display - **Label Size** (number): Font size for labels in pixels (min: 8, max: 16) - **Padding Size** (number): Spacing between rectangles in pixels (min: 0, max: 10) - **Border Radius** (number): Corner radius for rectangles in pixels (min: 0, max: 8) - **Stroke Width** (number): Border width for rectangles in pixels (min: 0, max: 3) - **Background Color** (color): Background color for the chart container - **Stroke Color** (color): Border color for rectangles - **Show Labels** (checkbox): Display category names inside rectangles - **Show Values** (checkbox): Display values inside rectangles - **Show Percentages** (checkbox): Show percentages instead of absolute values - **Enable Tooltips** (checkbox): Show detailed information on hover - **Chart Orientation** (select): Select chart orientation - **Hover Animation** (checkbox): Animate rectangles on hover ## 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. ## Frequently asked questions ### 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. ## Related tools - [Bar Chart Generator](https://elysiatools.com/en/tools/bar-chart-generator): Generate customizable bar charts from data with various styling options - [Bubble Chart Generator](https://elysiatools.com/en/tools/bubble-chart-generator): Generate customizable bubble charts from data with three dimensions (x, y, size) - [Comparison Bar Chart Generator](https://elysiatools.com/en/tools/comparison-bar-chart): Generate back-to-back bar charts for positive and negative value comparison, perfect for contrasting data sets - [Donut Chart Generator](https://elysiatools.com/en/tools/donut-chart-generator): Generate customizable donut charts (ring charts) from data with various styling options, perfect for showing proportions with a central space - [Funnel Chart Generator](https://elysiatools.com/en/tools/funnel-chart-generator): Generate customizable funnel charts from data, perfect for showing conversion rates, sales pipelines, and process flows - [Gantt Chart Generator](https://elysiatools.com/en/tools/gantt-chart-generator): Create professional Gantt charts with task timelines, dependencies, progress tracking, and milestone markers - [Gauge Chart Generator](https://elysiatools.com/en/tools/gauge-chart-generator): Generate customizable gauge charts (speedometer charts) from data, perfect for displaying KPIs, metrics, and performance indicators - [Heatmap Generator](https://elysiatools.com/en/tools/heatmap-generator): Generate customizable heatmaps from data, perfect for visualizing data density, correlations, and patterns ## Samples - [Grafana Advanced Application Samples](https://elysiatools.com/en/samples/grafana-samples): Comprehensive Grafana samples covering advanced dashboard design, alerting configurations, data source integrations, and plugin development - [D3.js Data Visualization Samples](https://elysiatools.com/en/samples/d3js-data-visualization): Comprehensive D3.js data visualization examples including charts, maps, animations, and interactive visualizations - [QR Code Samples](https://elysiatools.com/en/samples/qrcode-samples): Sample QR code images for testing QR code reading and generation tools - [ELK Stack Log Analysis Samples](https://elysiatools.com/en/samples/elk-stack-samples): Comprehensive ELK Stack (Elasticsearch, Logstash, Kibana) samples for log aggregation, processing, and visualization in distributed systems ## Related content - [Chart and Diagram Generators](https://elysiatools.com/en/hubs/chart-diagram-generators): Generate bar, line, pie, donut, scatter, radar, Gantt, Sankey, heatmap, funnel, treemap, and dozens more charts and diagrams from your own data in one visualization hub. - [JSON Schema, Mock Data, and API Fixture Generators](https://elysiatools.com/en/hubs/json-generate): Curated tools for JSON schema generation, mock payload building, and API fixture preparation in one hub. - [JSON to Typed Code Generators (TypeScript, Go, Rust, Kotlin, Java, C#)](https://elysiatools.com/en/hubs/json-to-typed-code-generators): Paste JSON and get ready-to-use types: TypeScript interfaces, Go structs, Rust structs with serde, Kotlin data classes, Java classes, C# classes, Zod schemas, and inferred JSON Schemas. - [JSON Interchange and Format Translation Tools](https://elysiatools.com/en/hubs/json-convert): Compare JSON conversion tools for CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN, and related structured formats in one hub.