generate_scatter_chart
Create scatter charts to visualize relationships between two variables, identify trends, and analyze data distribution patterns. Customize axis titles, dimensions, themes, and export options for PNG, SVG, or ECharts configurations.
Instructions
Generate a scatter chart to show the relationship between two variables, helps discover their relationship or trends, such as, the strength of correlation, data distribution patterns.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| axisXTitle | No | Set the x-axis title of chart. | |
| axisYTitle | No | Set the y-axis title of chart. | |
| data | Yes | Data for scatter chart, such as, [{ x: 10, y: 15 }, { x: 20, y: 25 }]. | |
| height | No | Set the height of the chart, default is 600px. | |
| outputType | No | The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option. | png |
| theme | No | Set the theme for the chart, optional, default is 'default'. | default |
| title | No | Set the title of the chart. | |
| width | No | Set the width of the chart, default is 800px. |
Implementation Reference
- src/tools/scatter.ts:39-108 (handler)The 'run' function that implements the tool's core logic: processes input data into ECharts-compatible scatter series, sets up chart options including axes, title, and tooltip, then invokes the shared generateChartImage utility to render and return the chart image or option.
run: async (params: { axisXTitle?: string; axisYTitle?: string; data: Array<{ x: number; y: number }>; height: number; theme?: "default" | "dark"; title?: string; width: number; outputType?: "png" | "svg" | "option"; }) => { const { axisXTitle, axisYTitle, data, height, theme, title, width, outputType, } = params; // Transform data for ECharts scatter chart const scatterData = data.map((item) => [item.x, item.y]); const series: Array<SeriesOption> = [ { data: scatterData, type: "scatter", symbolSize: 8, emphasis: { focus: "series", itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)", }, }, }, ]; const echartsOption: EChartsOption = { series, title: { left: "center", text: title, }, tooltip: { trigger: "item", }, xAxis: { name: axisXTitle, type: "value", scale: true, }, yAxis: { name: axisYTitle, type: "value", scale: true, }, }; return await generateChartImage( echartsOption, width, height, theme, outputType, "generate_scatter_chart", ); }, - src/tools/scatter.ts:24-38 (schema)Zod inputSchema defining the tool's parameters: axis titles, data points array (non-empty), chart dimensions, theme, title, and output type.
inputSchema: z.object({ axisXTitle: AxisXTitleSchema, axisYTitle: AxisYTitleSchema, data: z .array(data) .describe( "Data for scatter chart, such as, [{ x: 10, y: 15 }, { x: 20, y: 25 }].", ) .nonempty({ message: "Scatter chart data cannot be empty." }), height: HeightSchema, theme: ThemeSchema, title: TitleSchema, width: WidthSchema, outputType: OutputTypeSchema, }), - src/tools/index.ts:19-37 (registration)Export of the 'tools' array that collects and registers generateScatterChartTool (line 25) along with other chart tools, imported from individual tool files.
export const tools = [ generateEChartsTool, generateLineChartTool, generateBarChartTool, generatePieChartTool, generateRadarChartTool, generateScatterChartTool, generateSankeyChartTool, generateFunnelChartTool, generateGaugeChartTool, generateTreemapChartTool, generateSunburstChartTool, generateHeatmapChartTool, generateCandlestickChartTool, generateBoxplotChartTool, generateGraphChartTool, generateParallelChartTool, generateTreeChartTool, ]; - src/index.ts:22-35 (registration)The createEChartsServer function imports the 'tools' array and loops to register each tool (including generate_scatter_chart) with the MCP server using server.tool().
function createEChartsServer(): McpServer { const server = new McpServer({ name: "mcp-echarts", version: "0.1.0", }); for (const tool of tools) { const { name, description, inputSchema, run } = tool; // biome-ignore lint/suspicious/noExplicitAny: <explanation> server.tool(name, description, inputSchema.shape, run as any); } return server; }