Elysia Tools Docs
EN
Language
ZHESPTRUFRDEEN
Back to site
Browse tools

Data Visualization

Icicle Chart Generator

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

html· HTML resultOpen tool

Quick start

Call this tool from your code in three languages.

cURL
curl -X POST 'https://api.elysiatools.com/en/api/tools/icicle-chart-generator' \
  -H 'Content-Type: application/json' \
  -d '{"chartData":"JSON format:\n{\n  "name": "Root",\n  "value": 100,\n  "children": [\n    {\n      "name": "Branch A",\n      "value": 60,\n      "children": [\n        {"name": "Leaf A1", "value": 30},\n        {"name": "Leaf A2", "value": 30}\n      ]\n    }\n  ]\n}","chartTitle":"Enter chart title...","colorScheme":"ocean","customColors":"[\"#FF6B6B\", \"#4ECDC4\", \"#45B7D1\", \"#96CEB4\"]","valueFormat":"number","chartWidth":"600","chartHeight":"500","startLevel":"0","maxDepth":"3","labelSize":"12","paddingSize":"2","borderRadius":"4","strokeWidth":"1","backgroundColor":"#ffffff","strokeColor":"#ffffff","showLabels":true,"showValues":true,"showPercentages":false,"enableTooltip":true,"chartOrientation":"horizontal","hoverAnimation":true}'

© 2026 Elysia Tools. Developer documentation.

Back to siteBrowse tools

API reference

Send a POST request with your inputs as JSON. File parameters require a separate upload first.

Endpoint

HTTP
POST https://api.elysiatools.com/en/api/tools/icicle-chart-generator

Parameters

NameTypeRequiredDescription
chartDatatextareaYesHierarchical data in JSON format with name, value, and optional children arrays
chartTitletextNoTitle that will be displayed above the chart
colorSchemeselectNo—
customColorstextareaNoJSON array of hex colors (requires Custom Colors selection)
valueFormatselectNo—
chartWidthnumberNoWidth of the chart in pixels (min: 400, max: 1200)
chartHeightnumberNoHeight of the chart in pixels (min: 300, max: 800)
startLevelnumberNoStarting level to display (0 = root level)
maxDepthnumberNoMaximum number of levels to display
labelSizenumberNoFont size for labels in pixels (min: 8, max: 16)
paddingSizenumberNoSpacing between rectangles in pixels (min: 0, max: 10)
borderRadiusnumberNoCorner radius for rectangles in pixels (min: 0, max: 8)
strokeWidthnumberNoBorder width for rectangles in pixels (min: 0, max: 3)
backgroundColorcolorNoBackground color for the chart container
strokeColorcolorNoBorder color for rectangles
showLabelscheckboxNoDisplay category names inside rectangles
showValuescheckboxNoDisplay values inside rectangles
showPercentagescheckboxNoShow percentages instead of absolute values
enableTooltipcheckboxNoShow detailed information on hover
chartOrientationselectNo—
hoverAnimationcheckboxNoAnimate rectangles on hover

Response format

HTML result

JSON
{
  "result": "<div>Processed HTML content</div>",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}

MCP integration

Add this tool to your Model Context Protocol server so AI agents can list and call it.

Server configuration

Add this block to your MCP client configuration:

mcp.json
{
  "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://api.elysiatools.com/mcp/sse?toolId=icicle-chart-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

List available tools

After connecting to the SSE endpoint, list the exposed tools:

tools/list
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/list"
}

Call this tool

Invoke the tool by its id, passing arguments built from its parameters:

tools/call
{
  "jsonrpc": "2.0",
  "id": 2,
  "method": "tools/call",
  "params": {
    "name": "icicle-chart-generator",
    "arguments": {
  "chartData": "JSON format:\n{\n  &quot;name&quot;: &quot;Root&quot;,\n  &quot;value&quot;: 100,\n  &quot;children&quot;: [\n    {\n      &quot;name&quot;: &quot;Branch A&quot;,\n      &quot;value&quot;: 60,\n      &quot;children&quot;: [\n        {&quot;name&quot;: &quot;Leaf A1&quot;, &quot;value&quot;: 30},\n        {&quot;name&quot;: &quot;Leaf A2&quot;, &quot;value&quot;: 30}\n      ]\n    }\n  ]\n}",
  "chartTitle": "Enter chart title...",
  "colorScheme": "ocean",
  "customColors": "[\"#FF6B6B\", \"#4ECDC4\", \"#45B7D1\", \"#96CEB4\"]",
  "valueFormat": "number",
  "chartWidth": "600",
  "chartHeight": "500",
  "startLevel": "0",
  "maxDepth": "3",
  "labelSize": "12",
  "paddingSize": "2",
  "borderRadius": "4",
  "strokeWidth": "1",
  "backgroundColor": "#ffffff",
  "strokeColor": "#ffffff",
  "showLabels": true,
  "showValues": true,
  "showPercentages": false,
  "enableTooltip": true,
  "chartOrientation": "horizontal",
  "hoverAnimation": true
}
  }
}
Chain multiple tools in one session with a comma-separated toolId list, e.g. /mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp (max 20).

Questions or issues? Contact [email protected]

Browse tools
Open tool