generate_chart
Create customizable charts (bar, line, pie, radar, etc.) using QuickChart.io. Input data, labels, and configurations to generate visualizations tailored to your needs.
Instructions
Generate a chart using QuickChart
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| datasets | Yes | ||
| labels | No | Labels for data points | |
| options | No | ||
| title | No | ||
| type | Yes | Chart type (bar, line, pie, doughnut, radar, polarArea, scatter, bubble, radialGauge, speedometer) |
Implementation Reference
- src/index.ts:251-272 (handler)Main handler logic for the 'generate_chart' tool. Processes input arguments, validates and generates chart configuration, creates QuickChart URL, and returns it as text content. Includes error handling.case 'generate_chart': { try { const config = this.generateChartConfig(request.params.arguments); const url = await this.generateChartUrl(config); return { content: [ { type: 'text', text: url } ] }; } catch (error: any) { if (error instanceof McpError) { throw error; } throw new McpError( ErrorCode.InternalError, `Failed to generate chart: ${error?.message || 'Unknown error'}` ); } }
- src/index.ts:186-226 (schema)Input schema definition for the generate_chart tool, specifying required properties like type and datasets, with detailed type information.inputSchema: { type: 'object', properties: { type: { type: 'string', description: 'Chart type (bar, line, pie, doughnut, radar, polarArea, scatter, bubble, radialGauge, speedometer)' }, labels: { type: 'array', items: { type: 'string' }, description: 'Labels for data points' }, datasets: { type: 'array', items: { type: 'object', properties: { label: { type: 'string' }, data: { type: 'array' }, backgroundColor: { oneOf: [ { type: 'string' }, { type: 'array', items: { type: 'string' } } ] }, borderColor: { oneOf: [ { type: 'string' }, { type: 'array', items: { type: 'string' } } ] }, additionalConfig: { type: 'object' } }, required: ['data'] } }, title: { type: 'string' }, options: { type: 'object' } }, required: ['type', 'datasets'] }
- src/index.ts:183-227 (registration)Registration of the generate_chart tool in the ListTools response, including name, description, and input schema.{ name: 'generate_chart', description: 'Generate a chart using QuickChart', inputSchema: { type: 'object', properties: { type: { type: 'string', description: 'Chart type (bar, line, pie, doughnut, radar, polarArea, scatter, bubble, radialGauge, speedometer)' }, labels: { type: 'array', items: { type: 'string' }, description: 'Labels for data points' }, datasets: { type: 'array', items: { type: 'object', properties: { label: { type: 'string' }, data: { type: 'array' }, backgroundColor: { oneOf: [ { type: 'string' }, { type: 'array', items: { type: 'string' } } ] }, borderColor: { oneOf: [ { type: 'string' }, { type: 'array', items: { type: 'string' } } ] }, additionalConfig: { type: 'object' } }, required: ['data'] } }, title: { type: 'string' }, options: { type: 'object' } }, required: ['type', 'datasets'] } },
- src/index.ts:80-173 (helper)Helper function that validates input arguments, normalizes them into a ChartConfig object, handles special chart types, and performs defensive checks.private generateChartConfig(args: any): ChartConfig { // Add defensive checks to handle possibly malformed input if (!args) { throw new McpError( ErrorCode.InvalidParams, 'No arguments provided to generateChartConfig' ); } if (!args.type) { throw new McpError( ErrorCode.InvalidParams, 'Chart type is required' ); } if (!args.datasets || !Array.isArray(args.datasets)) { throw new McpError( ErrorCode.InvalidParams, 'Datasets must be a non-empty array' ); } const { type, labels, datasets, title, options = {} } = args; this.validateChartType(type); const config: ChartConfig = { type, data: { labels: labels || [], datasets: datasets.map((dataset: any) => { if (!dataset || !dataset.data) { throw new McpError( ErrorCode.InvalidParams, 'Each dataset must have a data property' ); } return { label: dataset.label || '', data: dataset.data, backgroundColor: dataset.backgroundColor, borderColor: dataset.borderColor, ...(dataset.additionalConfig || {}) }; }) }, options: { ...options, ...(title && { title: { display: true, text: title } }) } }; // Special handling for specific chart types switch (type) { case 'radialGauge': case 'speedometer': if (!datasets?.[0]?.data?.[0]) { throw new McpError( ErrorCode.InvalidParams, `${type} requires a single numeric value` ); } config.options = { ...config.options, plugins: { datalabels: { display: true, formatter: (value: number) => value } } }; break; case 'scatter': case 'bubble': datasets.forEach((dataset: any) => { if (!Array.isArray(dataset.data[0])) { throw new McpError( ErrorCode.InvalidParams, `${type} requires data points in [x, y${type === 'bubble' ? ', r' : ''}] format` ); } }); break; } return config; }
- src/index.ts:175-178 (helper)Helper function that encodes the ChartConfig as JSON and constructs the QuickChart URL.private async generateChartUrl(config: ChartConfig): Promise<string> { const encodedConfig = encodeURIComponent(JSON.stringify(config)); return `${QUICKCHART_BASE_URL}?c=${encodedConfig}`; }