mcp-ui

Interactive ECharts

echarts

Render an interactive Apache ECharts chart from a standard ECharts option JSON object. Supports line, bar (incl. stacked & dual-axis mixed), pie, radar, scatter, funnel, gauge, sankey, graph and more — chosen via series[].type. Use this whenever a user would benefit from a chart or data visualization instead of raw numbers. The option field description contains ready-to-copy JSON templates for every common chart type — follow those shapes and fill in the user's real data. Inputs: option (required ECharts option object), optional title, subtitle, insights (one-line takeaway under the chart). When enableInteractivity is true (default), clicking a data point sends a follow-up message to the conversation for drill-down. Output valid JSON only (no comments, no functions).

Input Schema

TableJSON Schema

Name	Required	Description	Default
`title`	No	Card title shown above the chart.
`locale`	No	UI language for the rendered card.	en
`option`	Yes	A valid Apache ECharts option object. Generate it from the user's data. Type templates (copy the shape, fill in real data): Valid JSON only: no comments, no trailing commas, no functions. Always include "series": [{ "type": ..., "data": [...] }]. line: {"tooltip":{"trigger":"axis"},"xAxis":{"type":"category","data":["Mon","Tue","Wed"]},"yAxis":{"type":"value"},"series":[{"type":"line","smooth":true,"data":[120,200,150]}]} bar: same axis shape as line, then {"series":[{"type":"bar","data":[5,9,7]}]} stacked bar: series:[{type:"bar",stack:"t",data:[..]},{type:"bar",stack:"t",data:[..]}] mixed (bar+line, dual axis): {"xAxis":{"type":"category","data":[..]},"yAxis":[{"type":"value"},{"type":"value"}],"series":[{"type":"bar","yAxisIndex":0,"data":[..]},{"type":"line","yAxisIndex":1,"data":[..]}]} pie: {"tooltip":{"trigger":"item"},"series":[{"type":"pie","radius":["40%","70%"],"data":[{"name":"A","value":10},{"name":"B","value":20}]}]} radar: {"tooltip":{},"radar":{"indicator":[{"name":"Speed","max":100},{"name":"Cost","max":100},{"name":"Quality","max":100}]},"series":[{"type":"radar","data":[{"name":"Model A","value":[80,40,70]},{"name":"Model B","value":[60,70,85]}]}]} scatter:{"xAxis":{"type":"value"},"yAxis":{"type":"value"},"series":[{"type":"scatter","symbolSize":8,"data":[[10,20],[15,25],[30,12]]}]} sankey: {"tooltip":{"trigger":"item"},"series":[{"type":"sankey","data":[{"name":"A"},{"name":"B"},{"name":"C"}],"links":[{"source":"A","target":"B","value":5},{"source":"B","target":"C","value":3}]}]} funnel: {"tooltip":{"trigger":"item"},"series":[{"type":"funnel","data":[{"name":"Visit","value":100},{"name":"Signup","value":45},{"name":"Buy","value":12}]}]} gauge: {"series":[{"type":"gauge","min":0,"max":100,"data":[{"value":72,"name":"Score"}]}]} Notes: category x-axis needs "data": [...]; pie/radar/sankey/funnel/gauge need no xAxis/yAxis. Keep series[].data as a plain array; use objects only for pie/funnel/radar named items. Dark theme, axis colors, legend and tooltip styling are auto-applied — omit styling unless needed.
`insights`	No	A one-line AI takeaway rendered under the chart.
`subtitle`	No	Small subtitle under the title.
`enableInteractivity`	No	When true, clicking a data point sends it back to the conversation.

Schema Changelog

Changes observed during successful MCP inspections.

First observedOct 15, 2026

TDQS

A4.1/5.0

Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden and does disclose real behavior: clicking a data point sends a follow-up message for drill-down when enableInteractivity is true (default), the card auto-applies dark theme/axis/legend/tooltip styling, and output must be valid JSON with no comments or functions. It omits any limits on chart size, data volume, or failure modes, so it stops short of a 5.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loads the core purpose and chart-type list before inputs and constraints, and every sentence contributes something. It is fairly dense and repeats the template guidance already living in the option schema description, costing a point.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given six parameters, nested option objects, and no output schema, the description covers the essential ground: what to render, required vs optional inputs, interactivity side effects, and input validity rules. Return/render semantics beyond 'a card appears' are left implicit, which is a minor gap.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the baseline is 3. The description restates required/optional status (option required; title, subtitle, insights optional) and the interactivity semantics, but leans on the schema's own templates rather than adding new meaning for locale or the option shape.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource ('Render an interactive Apache ECharts chart from a standard ECharts option JSON object') and enumerates the supported chart types via series[].type. This clearly separates it from siblings like csv-chart, function-grapher, and bit-visualizer without needing to open a schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Gives explicit usage context: 'Use this whenever a user would benefit from a chart or data visualization instead of raw numbers.' It tells the agent when to reach for this tool, but names no exclusion cases and does not point at competing siblings such as csv-chart for tabular input.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

All mcp-ui tools Inspect

Try in Browser

Context Every Agent Can ShareAgents share what they learn, hand off work, and keep it when you switch models. Start with 5 GB free.fulcradynamics.comAd

Glama MCP Gateway

Add one secure layer between your agents and this server.

Resources

Need Help?