Elysia Tools Docs
EN
Language
ZHESPTRUFRDEEN
Back to site
Browse tools

Data Visualization

Stacked Bar Chart Generator

Generate interactive stacked bar charts to visualize categorical data composition, perfect for comparing multiple data series across categories

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/stacked-bar-chart' \
  -H 'Content-Type: application/json' \
  -d '{"chartData":"JSON format:\n[{"category": "Q1", "series": "Product A", "value": 100},\n{"category": "Q1", "series": "Product B", "value": 150},\n{"category": "Q2", "series": "Product A", "value": 120},\n{"category": "Q2", "series": "Product B", "value": 180}]","chartTitle":"Enter chart title...","colorScheme":"default","customColors":"["#FF6B6B", "#4ECDC4", "#45B7D1", "#FFA07A"]","valueFormat":"number","chartHeight":"400","barSpacing":"0.2","backgroundColor":"#ffffff","showValues":true,"showLegend":true,"showGrid":true,"showAnimation":true,"showPercentage":false,"enableTooltip":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/stacked-bar-chart

Parameters

NameTypeRequiredDescription
chartDatatextareaYesData for the stacked bar chart in JSON format with category, series, and value fields
chartTitletextNoTitle that will be displayed above the chart
colorSchemeselectNo—
customColorstextareaNoJSON array of hex colors (requires Custom Colors selection)
valueFormatselectNo—
chartHeightnumberNoHeight of the chart in pixels (min: 300, max: 800)
barSpacingnumberNoSpacing between bars (0.1 - 0.5)
backgroundColorcolorNoBackground color for the chart container
showValuescheckboxNoDisplay values or percentages on the bars
showLegendcheckboxNoDisplay color legend for series
showGridcheckboxNoDisplay horizontal grid lines
showAnimationcheckboxNoAnimate bars when chart loads
showPercentagecheckboxNoShow percentages instead of values on bars
enableTooltipcheckboxNoShow detailed information 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-stacked-bar-chart": {
      "name": "stacked-bar-chart",
      "description": "Generate interactive stacked bar charts to visualize categorical data composition, perfect for comparing multiple data series across categories",
      "baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=stacked-bar-chart",
      "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": "stacked-bar-chart",
    "arguments": {
  "chartData": "JSON format:\n[{&quot;category&quot;: &quot;Q1&quot;, &quot;series&quot;: &quot;Product A&quot;, &quot;value&quot;: 100},\n{&quot;category&quot;: &quot;Q1&quot;, &quot;series&quot;: &quot;Product B&quot;, &quot;value&quot;: 150},\n{&quot;category&quot;: &quot;Q2&quot;, &quot;series&quot;: &quot;Product A&quot;, &quot;value&quot;: 120},\n{&quot;category&quot;: &quot;Q2&quot;, &quot;series&quot;: &quot;Product B&quot;, &quot;value&quot;: 180}]",
  "chartTitle": "Enter chart title...",
  "colorScheme": "default",
  "customColors": "[&quot;#FF6B6B&quot;, &quot;#4ECDC4&quot;, &quot;#45B7D1&quot;, &quot;#FFA07A&quot;]",
  "valueFormat": "number",
  "chartHeight": "400",
  "barSpacing": "0.2",
  "backgroundColor": "#ffffff",
  "showValues": true,
  "showLegend": true,
  "showGrid": true,
  "showAnimation": true,
  "showPercentage": false,
  "enableTooltip": 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