generate_dual_axis_chart
Create dual-axis charts to visualize and compare two quantitative variables using combined bar and line series, enabling analysis of trends and magnitudes across distinct metrics.
Instructions
Generate a dual-axis chart for visualizing two quantitative variables using a combination of bar and line series. Ideal for comparing trends and magnitudes across two metrics with distinct y-axes.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| output | No | Chart output type. Defaults to 'image'. | image |
| width | No | Chart width. Optional, defaults to 500. | |
| height | No | Chart height. Optional, defaults to 500. | |
| dataTable | Yes | Input data for the dual axis chart, e.g., [{ x: '2018', gmv: 99.9, user: 1200 }]. | |
| xField | Yes | Dimension field. Must exist in the data. | |
| yField | Yes | ||
| colorField | No | Color grouping field. Should not duplicate the dimension field. | |
| chartTheme | No | Chart theme. Optional, defaults to 'light'. | |
| title | No | Chart title text. | |
| subTitle | No | Chart subtitle text. | |
| titleOrient | No | Title position in the chart. | |
| xAxisOrient | No | X-axis position in the chart. | |
| xAxisTitle | No | X-axis title. | |
| xAxisHasGrid | No | Show vertical grid lines for the X-axis. | |
| xAxisHasLabel | No | Show X-axis labels. | |
| xAxisHasTick | No | Show X-axis ticks. | |
| leftYAxisTitle | No | Y-axis title. | |
| leftYAxisHasGrid | No | Show horizontal grid lines for the Y-axis. | |
| leftYAxisHasLabel | No | Show Y-axis labels. | |
| leftYAxisHasTick | No | Show Y-axis ticks. | |
| rightYAxisTitle | No | ||
| rightYAxisHasGrid | No | ||
| rightYAxisHasLabel | No | ||
| rightYAxisHasTick | No | ||
| background | No | Chart background color (hex). Optional, defaults to white. | |
| colors | No | Color palette for chart elements. | |
| stackOrPercent | No | Stacking mode: 'stack' for stacked data, 'percent' for percentage stacking. Requires 'color' field. |
Implementation Reference
- src/server.ts:43-125 (handler)MCP CallToolRequest handler that maps 'generate_dual_axis_chart' to chartType 'dual_axis', validates arguments using the specific schema, invokes generateChartByType, and returns the chart output (spec/image/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/utils/generateChart.ts:42-202 (helper)Core chart generation function called for 'dual_axis' type. Processes dual-axis specific options (left/right y-axes), builds VChart configuration using @visactor/generate-vchart, generates spec, and renders to image/html via external service.export async function generateChartByType(chartType: string, options: any) { const { title, subTitle, titleOrient, xAxisType, xAxisOrient, xAxisTitle, xAxisHasGrid, xAxisHasLabel, xAxisHasTick, yAxisType, yAxisOrient, yAxisTitle, yAxisHasGrid, yAxisHasLabel, yAxisHasTick, leftYAxisTitle, leftYAxisHasGrid, leftYAxisHasLabel, leftYAxisHasTick, rightYAxisTitle, rightYAxisHasGrid, rightYAxisHasLabel, rightYAxisHasTick, angleAxisTitle, angleAxisHasGrid, angleAxisHasLabel, angleAxisHasTick, angleAxisType, radiusAxisHasGrid, radiusAxisHasLabel, radiusAxisHasTick, radiusAxisType, radiusAxisTitle, output, width, height, ...res } = options; const opts = { ...res }; const titleObj = filterValidAttributes({ text: title, subText: subTitle, orient: titleOrient, }); const xAxisObj = filterValidAttributes({ type: xAxisType, orient: xAxisOrient, title: xAxisTitle, hasGrid: xAxisHasGrid, hasLabel: xAxisHasLabel, hasTick: xAxisHasTick, }); const yAxisObj = filterValidAttributes({ type: yAxisType, orient: yAxisOrient, title: yAxisTitle, hasGrid: yAxisHasGrid, hasLabel: yAxisHasLabel, hasTick: yAxisHasTick, }); const leftYAxisObj = filterValidAttributes({ title: leftYAxisTitle, hasGrid: leftYAxisHasGrid, hasLabel: leftYAxisHasLabel, hasTick: leftYAxisHasTick, }); const rightYAxisObj = filterValidAttributes({ title: rightYAxisTitle, hasGrid: rightYAxisHasGrid, hasLabel: rightYAxisHasLabel, hasTick: rightYAxisHasTick, }); const angleAxisObj = filterValidAttributes({ title: angleAxisTitle, hasGrid: angleAxisHasGrid, hasLabel: angleAxisHasLabel, hasTick: angleAxisHasTick, type: angleAxisType, }); const radiusAxisObj = filterValidAttributes({ hasGrid: radiusAxisHasGrid, hasLabel: radiusAxisHasLabel, hasTick: radiusAxisHasTick, type: radiusAxisType, title: radiusAxisTitle, }); const cell: Record<string, string> = {}; [ "xField", "yField", "colorField", "categoryField", "valueField", "wordField", "sizeField", "timeField", "sourceField", "targetField", "setsField", "radiusField", ].forEach((fieldName) => { if (isValid(options[fieldName])) { cell[fieldName.replace("Field", "")] = options[fieldName]; delete opts[fieldName]; } }); opts.cell = cell; if (!isEmpty(titleObj)) { opts.title = titleObj; } const axes = [ xAxisObj, yAxisObj, leftYAxisObj, rightYAxisObj, angleAxisObj, radiusAxisObj, ]; if (axes.some((axis) => !isEmpty(axis))) { opts.axes = axes.filter((axis) => !isEmpty(axis)); } const { spec } = generateChart(options.chartType ?? chartType, opts); if (!spec) { return null; } if (output === "spec") { if (isValid(width)) { spec.width = width; } if (isValid(height)) { spec.height = height; } return { spec: spec, }; } return gentrateChartImageOrHtml(output, spec, { width: `${width ?? 500}px`, height: `${height ?? 500}px`, }); }
- src/charts/dual_axis.ts:28-65 (schema)Zod input schema specific to dual-axis charts, requiring two yFields, left/right y-axis configurations, dataTable, xField, etc.const schema = z.object({ output: ChartOutputSchema, width: WidthSchema, height: HeightSchema, dataTable: z .array(z.any()) .describe( "Input data for the dual axis chart, e.g., [{ x: '2018', gmv: 99.9, user: 1200 }]." ) .nonempty({ message: "Data for the dual axis chart must not be empty." }), xField: XFieldSchema, yField: z.array(YFieldSchema).length(2), colorField: ColorFieldSchema, chartTheme: ThemeSchema, title: TitleTextSchema, subTitle: TitleSubTextSchema, titleOrient: TitleOrientSchema, xAxisOrient: XAxisOrientSchema, xAxisTitle: XAxisTitleSchema, xAxisHasGrid: XAxisHasGridSchema, xAxisHasLabel: XAxisHasLabelSchema, xAxisHasTick: XAxisHasTickSchema, leftYAxisTitle: YAxisTitleSchema, leftYAxisHasGrid: YAxisHasGridSchema, leftYAxisHasLabel: YAxisHasLabelSchema, leftYAxisHasTick: YAxisHasTickSchema, rightYAxisTitle: YAxisTitleSchema, rightYAxisHasGrid: YAxisHasGridSchema, rightYAxisHasLabel: YAxisHasLabelSchema, rightYAxisHasTick: YAxisHasTickSchema, background: BackgroundSchema, colors: ColorsSchema, stackOrPercent: StackSchema, });
- src/charts/dual_axis.ts:67-77 (registration)Defines the tool metadata (name, description, JSON schema) and exports as 'dual_axis' module for server registration.const tool = { name: "generate_dual_axis_chart", description: "Generate a dual-axis chart for visualizing two quantitative variables using a combination of bar and line series. Ideal for comparing trends and magnitudes across two metrics with distinct y-axes.", inputSchema: convertZodToJsonSchema(schema), }; export const dual_axis = { schema, tool, };
- src/server.ts:34-38 (registration)Registers the generate_dual_axis_chart tool (via Charts.dual_axis.tool) for MCP tool listing.server.setRequestHandler(ListToolsRequestSchema, async () => { return { tools: Object.values(Charts).map(chart => (chart as any).tool), }; });