generate_pie_chart
Create proportional pie charts or donut charts to visualize data like market shares or budget allocations. Customize dimensions, themes, and output formats (PNG, SVG, ECharts option) for clear graphical representation.
Instructions
Generate a pie chart to show the proportion of parts, such as, market share and budget allocation.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| data | Yes | Data for pie chart, such as, [{ category: 'Category A', value: 27 }, { category: 'Category B', value: 25 }]. | |
| height | No | Set the height of the chart, default is 600px. | |
| innerRadius | No | Set the innerRadius of pie chart, the value between 0 and 1. Set the pie chart as a donut chart. Set the value to 0.6 or number in [0 ,1] to enable it. | |
| 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/pie.ts:43-108 (handler)The async 'run' handler function that implements the core logic for generating a pie chart using ECharts, transforming input data, configuring series and options, and calling generateChartImage to produce the output.
run: async (params: { data: Array<{ category: string; value: number }>; height: number; innerRadius?: number; theme?: "default" | "dark"; title?: string; width: number; outputType?: "png" | "svg" | "option"; }) => { const { data, height, innerRadius = 0, theme, title, width, outputType, } = params; // Transform data for ECharts const pieData = data.map((item) => ({ name: item.category, value: item.value, })); const series: Array<SeriesOption> = [ { data: pieData, radius: innerRadius > 0 ? [`${innerRadius * 100}%`, "70%"] : "70%", type: "pie", emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)", }, }, }, ]; const echartsOption: EChartsOption = { legend: { left: "center", orient: "horizontal", top: "bottom", }, series, title: { left: "center", text: title, }, tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)", }, }; return await generateChartImage( echartsOption, width, height, theme, outputType, "generate_pie_chart", ); }, - src/tools/pie.ts:24-42 (schema)Zod input schema defining parameters for the tool: data array, dimensions (width/height), innerRadius, theme, title, and outputType.
inputSchema: z.object({ data: z .array(data) .describe( "Data for pie chart, such as, [{ category: 'Category A', value: 27 }, { category: 'Category B', value: 25 }].", ) .nonempty({ message: "Pie chart data cannot be empty." }), height: HeightSchema, innerRadius: z .number() .default(0) .describe( "Set the innerRadius of pie chart, the value between 0 and 1. Set the pie chart as a donut chart. Set the value to 0.6 or number in [0 ,1] to enable it.", ), theme: ThemeSchema, title: TitleSchema, width: WidthSchema, outputType: OutputTypeSchema, }), - src/tools/index.ts:19-37 (registration)The generatePieChartTool is included in the exported 'tools' array, which aggregates all available chart tools for registration in the MCP server.
export const tools = [ generateEChartsTool, generateLineChartTool, generateBarChartTool, generatePieChartTool, generateRadarChartTool, generateScatterChartTool, generateSankeyChartTool, generateFunnelChartTool, generateGaugeChartTool, generateTreemapChartTool, generateSunburstChartTool, generateHeatmapChartTool, generateCandlestickChartTool, generateBoxplotChartTool, generateGraphChartTool, generateParallelChartTool, generateTreeChartTool, ];