generate_chart
Create customizable charts including bar, line, pie, radar, and gauge types using Chart.js configurations. Generate chart URLs or download images for data visualization needs.
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:220-241 (handler)Main handler for the 'generate_chart' tool call within the CallToolRequestSchema. It generates the chart configuration and URL, returning the URL as text content, with 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:155-195 (schema)Input schema for the 'generate_chart' tool, defining the structure and types for parameters: type, labels, datasets (with sub-properties), title, and options.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:152-196 (registration)Registration of the 'generate_chart' tool in the ListToolsRequestSchema response, including name, description, and reference to 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:79-142 (helper)Helper method to generate and validate ChartConfig from tool arguments, including special handling for gauge, scatter, and bubble charts.private generateChartConfig(args: any): ChartConfig { const { type, labels, datasets, title, options = {} } = args; this.validateChartType(type); const config: ChartConfig = { type, data: { labels: labels || [], datasets: datasets.map((dataset: any) => ({ 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:144-147 (helper)Helper method to create the QuickChart URL by encoding the ChartConfig JSON.private async generateChartUrl(config: ChartConfig): Promise<string> { const encodedConfig = encodeURIComponent(JSON.stringify(config)); return `${QUICKCHART_BASE_URL}?c=${encodedConfig}`; }