generate_sunburst_chart
Create sunburst charts to visualize multi-level hierarchical data like organizational structures, file systems, or category breakdowns, customizing height, width, theme, and output formats (png, svg, option).
Instructions
Generate a sunburst chart to display multi-level hierarchical data, such as, organizational structure, file system hierarchy, or category breakdown.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| data | Yes | Data for sunburst chart, such as, [{ name: 'Technology', value: 100, children: [{ name: 'Frontend', value: 60, children: [{ name: 'React', value: 30 }] }] }]. | |
| 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/sunburst.ts:48-133 (handler)The handler function constructs the ECharts sunburst chart configuration with hierarchical data, custom levels, labels, and styles, then generates the output image using a shared utility.run: async (params: { data: Array<SunburstDataType>; height: number; theme?: "default" | "dark"; title?: string; width: number; outputType?: "png" | "svg" | "option"; }) => { const { data, height, theme, title, width, outputType } = params; const series: Array<SeriesOption> = [ { type: "sunburst", data: data, radius: [0, "90%"], center: ["50%", "50%"], sort: undefined, emphasis: { focus: "ancestor", }, label: { show: true, fontSize: 12, color: "#000", minAngle: 10, }, itemStyle: { borderRadius: 7, borderWidth: 2, borderColor: "#fff", }, levels: [ {}, { r0: "15%", r: "35%", itemStyle: { borderWidth: 2, }, label: { rotate: "tangential", }, }, { r0: "35%", r: "70%", label: { align: "right", }, }, { r0: "70%", r: "72%", label: { position: "outside", padding: 3, silent: false, }, itemStyle: { borderWidth: 3, }, }, ], }, ]; const echartsOption: EChartsOption = { series, title: { left: "center", text: title, }, tooltip: { trigger: "item", }, }; return await generateChartImage( echartsOption, width, height, theme, outputType, "generate_sunburst_chart", ); },
- src/tools/sunburst.ts:35-47 (schema)Zod input schema defining hierarchical sunburst data structure and chart parameters like dimensions, theme, title, and output type.inputSchema: z.object({ data: z .array(SunburstNodeSchema) .describe( "Data for sunburst chart, such as, [{ name: 'Technology', value: 100, children: [{ name: 'Frontend', value: 60, children: [{ name: 'React', value: 30 }] }] }].", ) .nonempty({ message: "Sunburst chart data cannot be empty." }), height: HeightSchema, theme: ThemeSchema, title: TitleSchema, width: WidthSchema, outputType: OutputTypeSchema, }),
- src/tools/sunburst.ts:19-29 (schema)Recursive Zod schema for sunburst node data, supporting nested children.// Define recursive schema for hierarchical data const SunburstNodeSchema: z.ZodType<SunburstDataType> = z.lazy(() => z.object({ name: z.string().describe("Node name, such as 'Technology'."), value: z.number().describe("Node value, such as 100."), children: z .array(SunburstNodeSchema) .optional() .describe("Child nodes for hierarchical structure."), }), );
- src/tools/index.ts:19-37 (registration)Registers the generateSunburstChartTool in the central tools array exported for use in MCP server.export const tools = [ generateEChartsTool, generateLineChartTool, generateBarChartTool, generatePieChartTool, generateRadarChartTool, generateScatterChartTool, generateSankeyChartTool, generateFunnelChartTool, generateGaugeChartTool, generateTreemapChartTool, generateSunburstChartTool, generateHeatmapChartTool, generateCandlestickChartTool, generateBoxplotChartTool, generateGraphChartTool, generateParallelChartTool, generateTreeChartTool, ];
- src/tools/index.ts:15-15 (registration)Imports the sunburst chart tool for inclusion in the tools registry.import { generateSunburstChartTool } from "./sunburst";