MCP ECharts

Instructions

Implementation Reference

• src/tools/echarts.ts:95-132 (handler)

  The core handler function ('run') that validates the ECharts JSON option using isValidEChartsOption, parses it, handles debug logging, and invokes the generateChartImage utility to produce the chart output based on parameters.
  run: async (params: { echartsOption: string; width?: number; height?: number; theme?: "default" | "dark"; outputType?: "png" | "svg" | "option"; }) => { const { width, height, echartsOption, theme, outputType } = params; // Debug logging (writes to stderr, won't interfere with MCP protocol) if (process.env.DEBUG_MCP_ECHARTS) { console.error("[DEBUG] ECharts tool called with params:", { echartsOptionLength: echartsOption?.length, width, height, theme, outputType, }); } if (!isValidEChartsOption(echartsOption)) { throw new Error( "Invalid ECharts option, a valid ECharts option must be a valid JSON string, and cannot be empty.", ); } const option = JSON.parse(echartsOption); // Use the unified image generation method return await generateChartImage( option, width, height, theme, outputType, "generate_echarts_chart", ); },
• src/tools/echarts.ts:38-94 (schema)

  Zod schema for input validation, defining echartsOption (required JSON string with detailed example and validation), optional width/height (with min/max), theme enum, and outputType.
  inputSchema: z.object({ echartsOption: z .string() .describe( `ECharts option and configuration used to generate charts. For example: { "title": { "text": "ECharts Entry Example", "left": "center", "top": "2%" }, "tooltip": {}, "xAxis": { "data": ["shirt", "cardigan", "chiffon", "pants", "heels", "socks"] }, "yAxis": {}, "series": [{ "name": "Sales", "type": "bar", "data": [5, 20, 36, 10, 10, 20] }] } ATTENTION: A valid ECharts option must be a valid JSON string, and cannot be empty. `, ) .nonempty({ message: "A valid ECharts option must be a valid JSON string, and cannot be empty.", }), width: z .number() .min( 50, "Width must be at least 50 pixels to ensure proper chart rendering", ) .max(5000, "Width cannot exceed 5000 pixels") .describe("The width of the ECharts in pixels. Default is 800.") .optional() .default(800), height: z .number() .min( 50, "Height must be at least 50 pixels to ensure proper chart rendering", ) .max(5000, "Height cannot exceed 5000 pixels") .describe("The height of the ECharts in pixels. Default is 600.") .optional() .default(600), theme: z .enum(["default", "dark"]) .describe("ECharts theme, optional. Default is 'default'.") .optional() .default("default"), outputType: OutputTypeSchema, }),
• src/tools/index.ts:19-37 (registration)

  The generateEChartsTool is registered by being included first in the exported 'tools' array, which likely serves as the central registry for all MCP tools in the codebase.
  export const tools = [ generateEChartsTool, generateLineChartTool, generateBarChartTool, generatePieChartTool, generateRadarChartTool, generateScatterChartTool, generateSankeyChartTool, generateFunnelChartTool, generateGaugeChartTool, generateTreemapChartTool, generateSunburstChartTool, generateHeatmapChartTool, generateCandlestickChartTool, generateBoxplotChartTool, generateGraphChartTool, generateParallelChartTool, generateTreeChartTool, ];
• src/tools/echarts.ts:5-32 (helper)

  Helper function to validate if the provided echartsOption string is a valid JSON object with basic checks for series types and required axes for cartesian charts.
  function isValidEChartsOption(option: string): boolean { try { const parsedOption = JSON.parse(option); if (typeof parsedOption !== "object" || parsedOption === null) { return false; } // Basic validation for common chart types that require axes if (parsedOption.series && Array.isArray(parsedOption.series)) { const hasCartesianSeries = parsedOption.series.some( (series: { type?: string }) => series.type && ["bar", "line", "scatter"].includes(series.type), ); // If chart has cartesian series, it should have proper axis configuration if (hasCartesianSeries && !parsedOption.xAxis && !parsedOption.yAxis) { console.error( "[DEBUG] Chart validation failed: Cartesian chart missing axis configuration", ); return false; } } return true; } catch { return false; } }
• src/tools/echarts.ts:34-133 (registration)

  The complete tool object definition exported as generateEChartsTool, including name, description, inputSchema, and run handler.
  export const generateEChartsTool = { name: "generate_echarts", description: "Generate visual charts using Apache ECharts with echarts option and configuration dynamically. Apache ECharts is an Open Source JavaScript Visualization Library, which is used to create interactive charts and visualizations in web applications. It supports a wide range of chart types, including line charts, bar charts, pie charts, scatter plots, and more. ECharts is highly customizable and can be integrated with various data sources to create dynamic visualizations.", inputSchema: z.object({ echartsOption: z .string() .describe( `ECharts option and configuration used to generate charts. For example: { "title": { "text": "ECharts Entry Example", "left": "center", "top": "2%" }, "tooltip": {}, "xAxis": { "data": ["shirt", "cardigan", "chiffon", "pants", "heels", "socks"] }, "yAxis": {}, "series": [{ "name": "Sales", "type": "bar", "data": [5, 20, 36, 10, 10, 20] }] } ATTENTION: A valid ECharts option must be a valid JSON string, and cannot be empty. `, ) .nonempty({ message: "A valid ECharts option must be a valid JSON string, and cannot be empty.", }), width: z .number() .min( 50, "Width must be at least 50 pixels to ensure proper chart rendering", ) .max(5000, "Width cannot exceed 5000 pixels") .describe("The width of the ECharts in pixels. Default is 800.") .optional() .default(800), height: z .number() .min( 50, "Height must be at least 50 pixels to ensure proper chart rendering", ) .max(5000, "Height cannot exceed 5000 pixels") .describe("The height of the ECharts in pixels. Default is 600.") .optional() .default(600), theme: z .enum(["default", "dark"]) .describe("ECharts theme, optional. Default is 'default'.") .optional() .default("default"), outputType: OutputTypeSchema, }), run: async (params: { echartsOption: string; width?: number; height?: number; theme?: "default" | "dark"; outputType?: "png" | "svg" | "option"; }) => { const { width, height, echartsOption, theme, outputType } = params; // Debug logging (writes to stderr, won't interfere with MCP protocol) if (process.env.DEBUG_MCP_ECHARTS) { console.error("[DEBUG] ECharts tool called with params:", { echartsOptionLength: echartsOption?.length, width, height, theme, outputType, }); } if (!isValidEChartsOption(echartsOption)) { throw new Error( "Invalid ECharts option, a valid ECharts option must be a valid JSON string, and cannot be empty.", ); } const option = JSON.parse(echartsOption); // Use the unified image generation method return await generateChartImage( option, width, height, theme, outputType, "generate_echarts_chart", ); }, };