generate_chart
Create customizable data visualizations using QuickChart.io, supporting multiple chart types like bar, line, pie, and radar charts with Chart.js configuration.
Instructions
Generate a chart using QuickChart
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| type | Yes | Chart type (bar, line, pie, doughnut, radar, polarArea, scatter, bubble, radialGauge, speedometer) | |
| labels | No | Labels for data points | |
| datasets | Yes | ||
| title | No | ||
| options | No |
Implementation Reference
- src/index.ts:251-272 (handler)Main execution handler for the 'generate_chart' tool. Processes arguments, generates chart configuration, creates QuickChart URL, and returns it as text content.
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:187-226 (schema)Input schema defining the parameters for the 'generate_chart' tool, including type, labels, datasets, title, and options.
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)Tool registration 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 method that validates and normalizes input arguments into a ChartConfig object, including chart type validation and special handling for certain types.
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 method 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}`; }