get_chart_snippet
Generates a ready-to-use HTML and JavaScript snippet for creating line, area, bar, horizontal bar, donut, or stacked charts.
Instructions
Returns a ready-to-use ElegantEChart.* HTML+JS snippet for a chart type.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| chart_type | Yes |
Implementation Reference
- api/mcp.ts:592-596 (handler)The MCP tool handler for 'get_chart_snippet'. It receives a chart_type (line, area, bar, hbar, donut, stacked), looks it up in CHART_SNIPPETS, and returns the HTML+JS snippet.
/* 5. get_chart_snippet */ server.tool("get_chart_snippet", "ElegantEChart HTML+JS snippet.", { chart_type: z.enum(["line","area","bar","hbar","donut","stacked"]) }, async ({ chart_type }) => { const s = CHART_SNIPPETS[chart_type]; return { content: [{ type: "text" as const, text: s ? `## ${chart_type} Chart\n\n${s}` : `Unknown: ${chart_type}` }] }; }); - api/mcp.ts:593-593 (schema)Input schema for get_chart_snippet: chart_type is a Zod enum allowing only 'line', 'area', 'bar', 'hbar', 'donut', 'stacked'.
server.tool("get_chart_snippet", "ElegantEChart HTML+JS snippet.", { chart_type: z.enum(["line","area","bar","hbar","donut","stacked"]) }, async ({ chart_type }) => { - api/mcp.ts:121-128 (helper)The CHART_SNIPPETS data registry mapping chart type keys to their HTML+ElegantEChart JS code snippets. Contains predefined snippets for line, area, bar, hbar, donut, and stacked charts.
const CHART_SNIPPETS: Record<string, string> = { line: `<div id="chart-line" style="width:100%;min-height:220px;"></div>\n<script>\nElegantEChart.line('chart-line', {\n labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],\n datasets: [\n { label: 'Series A', values: [120,180,140,220,190,160,210], color: '#2C66DD', fill: false },\n { label: 'Series B', values: [80,110,95,140,120,100,130], color: '#009CBB', fill: false }\n ]\n});\n<\/script>`, area: `<div id="chart-area" style="width:100%;min-height:220px;"></div>\n<script>\nElegantEChart.line('chart-area', {\n labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],\n datasets: [\n { label: 'Series A', values: [120,180,140,220,190,160,210], color: '#2C66DD', fill: true },\n { label: 'Series B', values: [80,110,95,140,120,100,130], color: '#009CBB', fill: true }\n ]\n});\n<\/script>`, bar: `<div id="chart-bar" style="width:100%;min-height:220px;"></div>\n<script>\nElegantEChart.bar('chart-bar', {\n labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],\n datasets: [\n { label: 'Series A', values: [24,18,31,22,27,19,26], color: '#2C66DD' },\n { label: 'Series B', values: [8,5,12,6,9,4,7], color: '#DD1616' }\n ]\n});\n<\/script>`, hbar: `<div id="chart-hbar" style="width:100%;min-height:220px;"></div>\n<script>\nElegantEChart.hbar('chart-hbar', {\n labels: ['Item A','Item B','Item C','Item D','Item E'],\n datasets: [\n { label: 'Count', values: [866,3452,1231,4567,987], color: '#2C66DD' }\n ]\n});\n<\/script>`, donut: `<div id="chart-donut" style="width:100%;min-height:220px;"></div>\n<script>\nElegantEChart.donut('chart-donut', {\n labels: ['Critical','High','Medium','Low'],\n values: [18,34,56,92],\n colors: ['#DD1616','#D14900','#FABB34','#198019']\n});\n<\/script>`, stacked: `<div id="chart-stacked" style="width:100%;min-height:220px;"></div>\n<script>\nElegantEChart.bar('chart-stacked', {\n labels: ['Mon','Tue','Wed','Thu','Fri'],\n datasets: [\n { label: 'Critical', values: [12,19,8,15,22], color: '#DD1616' },\n { label: 'High', values: [8,14,11,9,17], color: '#D14900' },\n { label: 'Medium', values: [20,25,18,22,30], color: '#FABB34' }\n ]\n}, { stacked: true });\n<\/script>`, };