Elysia Tools Docs
EN
Language
ZHESPTRUFRDEEN
Back to site
Browse tools

Data Visualization

Stacked Area Chart Generator

Generate stacked area charts showing cumulative trends of multiple data series, perfect for visualizing total trends and component contributions

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-area-chart' \
  -H 'Content-Type: application/json' \
  -d '{"chartData":"Multi-series JSON:\n{"labels": ["Jan", "Feb", "Mar"],\n  "series": [\n    {"name": "Product A", "data": [100, 150, 120]},\n    {"name": "Product B", "data": [80, 110, 140]},\n    {"name": "Product C", "data": [50, 70, 90]}\n  ]\n}\n\nor single series JSON:\n[{"label": "Jan", "value": 100}, {"label": "Feb", "value": 150}, {"label": "Mar", "value": 120}]","chartTitle":"Enter chart title...","curveType":"smooth","areaColors":"#3b82f6,#10b981,#f59e0b","fillOpacity":"0.6","backgroundColor":"#ffffff","gridColor":"#e0e0e0","lineWidth":"2","chartHeight":"400","maxValue":0,"minValue":"0","xAxisLabel":"Category","yAxisLabel":"Value","showGrid":true,"showPoints":false,"showValues":false,"showTotalLine":true,"normalizeData":false,"showLegend":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-area-chart

Parameters

NameTypeRequiredDescription
chartDatatextareaYesData for the stacked chart. Supports multi-series JSON for stacking or single series array
chartTitletextNoTitle that will be displayed above the chart
curveTypeselectNo—
areaColorstextNoColors for multiple areas (comma-separated hex colors). Leave empty for default colors.
fillOpacitytextNoOpacity of the area fill (0.1 to 1.0)
backgroundColorcolorNoBackground color for the chart container
gridColorcolorNoColor for the grid lines
lineWidthnumberNoWidth of the area boundary lines in pixels
chartHeightnumberNoHeight of the chart in pixels
maxValuenumberNoMaximum value for Y-axis (leave empty for auto-scale)
minValuenumberNoMinimum value for Y-axis
xAxisLabeltextNoLabel for the X-axis
yAxisLabeltextNoLabel for the Y-axis
showGridcheckboxNoDisplay grid lines for better readability
showPointscheckboxNoDisplay data points on the areas
showValuescheckboxNoDisplay the actual values on data points
showTotalLinecheckboxNoDisplay a line showing the cumulative total
normalizeDatacheckboxNoConvert values to percentages showing relative contribution
showLegendcheckboxNoDisplay a legend below the chart

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-area-chart": {
      "name": "stacked-area-chart",
      "description": "Generate stacked area charts showing cumulative trends of multiple data series, perfect for visualizing total trends and component contributions",
      "baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=stacked-area-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-area-chart",
    "arguments": {
  "chartData": "Multi-series JSON:\n{&quot;labels&quot;: [&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;],\n  &quot;series&quot;: [\n    {&quot;name&quot;: &quot;Product A&quot;, &quot;data&quot;: [100, 150, 120]},\n    {&quot;name&quot;: &quot;Product B&quot;, &quot;data&quot;: [80, 110, 140]},\n    {&quot;name&quot;: &quot;Product C&quot;, &quot;data&quot;: [50, 70, 90]}\n  ]\n}\n\nor single series JSON:\n[{&quot;label&quot;: &quot;Jan&quot;, &quot;value&quot;: 100}, {&quot;label&quot;: &quot;Feb&quot;, &quot;value&quot;: 150}, {&quot;label&quot;: &quot;Mar&quot;, &quot;value&quot;: 120}]",
  "chartTitle": "Enter chart title...",
  "curveType": "smooth",
  "areaColors": "#3b82f6,#10b981,#f59e0b",
  "fillOpacity": "0.6",
  "backgroundColor": "#ffffff",
  "gridColor": "#e0e0e0",
  "lineWidth": "2",
  "chartHeight": "400",
  "maxValue": 0,
  "minValue": "0",
  "xAxisLabel": "Category",
  "yAxisLabel": "Value",
  "showGrid": true,
  "showPoints": false,
  "showValues": false,
  "showTotalLine": true,
  "normalizeData": false,
  "showLegend": 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