generate_hierarchical_chart
Visualize hierarchical data proportions using sunburst, treemap, or circle packing charts. Specify dimensions, measures, and themes to create interactive or static outputs for multi-level categorical analysis.
Instructions
Generate a chart for hierarchical visualization of multi-level categorical data proportions, include sunburst, treemap, circle_packing.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| background | No | Chart background color (hex). Optional, defaults to white. | |
| chartTheme | No | Chart theme. Optional, defaults to 'light'. | |
| chartType | Yes | Chart type | |
| colorField | Yes | ||
| colors | No | Color palette for chart elements. | |
| dataTable | Yes | Hierarchical data for the chart, e.g., [{ category: 'Category 0', subCategory: 'Category 01', value: 10}]. | |
| height | No | Chart height. Optional, defaults to 500. | |
| output | No | Chart output type. Defaults to 'image'. | image |
| subTitle | No | Chart subtitle text. | |
| title | No | Chart title text. | |
| titleOrient | No | Title position in the chart. | |
| valueField | Yes | Measure field. Must be numeric and exist in the data. | |
| width | No | Chart width. Optional, defaults to 500. |
Implementation Reference
- src/server.ts:43-125 (handler)Generic MCP CallToolRequest handler that executes the logic for 'generate_hierarchical_chart' (mapped to 'sunburst' chartType). Validates input using the tool's schema, calls generateChartByType('sunburst', args), and returns chart spec, image, or HTML.server.setRequestHandler(CallToolRequestSchema, async request => { const toolName = request.params.name; const chartType = Object.keys(Charts).find( key => (Charts as any)[key].tool.name === toolName ); if (!chartType) { throw new McpError( ErrorCode.MethodNotFound, `Unknown tool: ${request.params.name}.` ); } try { // Validate input using Zod before generating chart const args = request.params.arguments || {}; // Select the appropriate schema based on the chart type const schema = Charts[chartType as keyof typeof Charts].schema; if (schema) { const result = schema.safeParse(args); if (!result.success) { throw new McpError( ErrorCode.InvalidParams, `Invalid parameters: ${result.error.message}` ); } } const res = await generateChartByType(chartType, args); if (res && (res as any).spec) { return { content: [ { type: 'text', text: JSON.stringify((res as any).spec, null, 2), }, ], }; } if (res && (res as any).image) { return { content: [ { type: 'text', text: (res as any).image, }, ], }; } if (res && (res as any).html) { return { content: [ { type: 'text', text: (res as any).html, }, ], }; } return { content: [ { type: 'text', text: 'Failed to generate chart', }, ], }; } catch (error: any) { if (error instanceof McpError) { throw error; } throw new McpError( ErrorCode.InternalError, `Failed to generate chart: ${error?.message || 'Unknown error.'}` ); } });
- src/charts/hierarchical.ts:17-42 (schema)Zod schema defining the input parameters and validation for the generate_hierarchical_chart tool.const schema = z.object({ output: ChartOutputSchema, chartType: z .enum(["sunburst", "treemap", "circle_packing"]) .describe("Chart type"), width: WidthSchema, height: HeightSchema, dataTable: z .array(z.any()) .describe( "Hierarchical data for the chart, e.g., [{ category: 'Category 0', subCategory: 'Category 01', value: 10}]." ) .nonempty({ message: "Data cannot be empty." }), colorField: z.array(XFieldSchema).nonempty(), valueField: YFieldSchema, chartTheme: ThemeSchema, title: TitleTextSchema, subTitle: TitleSubTextSchema, titleOrient: TitleOrientSchema, background: BackgroundSchema, colors: ColorsSchema, });
- src/server.ts:34-38 (registration)MCP ListToolsRequest handler that registers and lists all available chart tools, including 'generate_hierarchical_chart' from Charts.sunburst.tool.server.setRequestHandler(ListToolsRequestSchema, async () => { return { tools: Object.values(Charts).map(chart => (chart as any).tool), }; });
- src/charts/hierarchical.ts:44-54 (registration)Defines and exports the tool metadata (name, description, schema) for 'generate_hierarchical_chart' under the 'sunburst' export key.const tool = { name: "generate_hierarchical_chart", description: "Generate a chart for hierarchical visualization of multi-level categorical data proportions, include sunburst, treemap, circle_packing.", inputSchema: convertZodToJsonSchema(schema), }; export const sunburst = { schema, tool, };