create-sparkline-using-chartjs
Generate sparkline charts from Chart.js configurations to visualize data trends, providing image URLs or saving files directly.
Instructions
Create sparkline charts using Chart.js - get sparkline image URL or save sparkline image to file
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| action | Yes | Whether to get sparkline URL or save as file | |
| outputPath | No | Path where to save the file (only used with action=save_file) | |
| chart | Yes | Chart.js configuration for sparkline | |
| width | No | Chart width in pixels (default: 100) | |
| height | No | Chart height in pixels (default: 30) | |
| devicePixelRatio | No | Device pixel ratio (default: 2) | |
| backgroundColor | No | Background color (default: transparent) |
Implementation Reference
- src/tools/sparkline.ts:212-315 (handler)Main handler function that validates inputs, constructs QuickChart URL, fetches and processes the sparkline image as base64 or saves to file, and returns structured response with URL, image, and metadata.export async function handleSparklineTool(args: any): Promise<any> { const chart = args.chart as any; const action = args.action as string; validateChart(chart); validateAction(action); validateOutputPath(args.outputPath, action); validateDimensions(args.width, args.height); validateDevicePixelRatio(args.devicePixelRatio); validateBackgroundColor(args.backgroundColor); const params = buildSparklineParams(chart, { width: args.width as number, height: args.height as number, devicePixelRatio: args.devicePixelRatio as number, backgroundColor: args.backgroundColor as string, }); const chartUrl = buildSparklineUrl(chart); const result: any = { content: [ { type: "text", text: "Below is the chart URL:", }, { type: "text", text: chartUrl, }, ], metadata: { chartType: chart?.type || "sparkline", generatedAt: new Date().toISOString(), chartUrl: chartUrl, }, }; try { const pngData = await fetchSparklineContent(params, "png"); const pngBase64 = Buffer.from(pngData).toString("base64"); result.content.push( { type: "text", text: "Below is the PNG image:", }, { type: "image", data: pngBase64, mimeType: "image/png", } ); result.metadata.pngBase64 = pngBase64; } catch (error) { result.content.unshift({ type: "text", text: "⚠️ Failed to fetch chart image", }); result.content.push({ type: "text", text: `Error: ${error instanceof Error ? error.message : String(error)}`, }); result.metadata.error = error instanceof Error ? error.message : String(error); } if (action === "get_url") { return result; } const format = "png"; const outputPath = getDownloadPath( args.outputPath as string | undefined, format ); try { const dir = path.dirname(outputPath); if (!fs.existsSync(dir)) { fs.mkdirSync(dir, { recursive: true }); } const data = await fetchSparklineContent(params, format); fs.writeFileSync(outputPath, data); result.metadata.savedPath = outputPath; result.content.push({ type: "text", text: "Below is the saved file path:", }); result.content.push({ type: "text", text: outputPath, }); return result; } catch (error) { throw new McpError( ErrorCode.InternalError, `Failed to save chart: ${ error instanceof Error ? error.message : String(error) }` ); } }
- src/tools/sparkline.ts:11-52 (schema)Tool definition object including name, description, and detailed inputSchema for parameters like action, chart config, dimensions, etc.export const CREATE_SPARKLINE_USING_CHARTJS_TOOL: Tool = { name: "create-sparkline-using-chartjs", description: "Create sparkline charts using Chart.js - get sparkline image URL or save sparkline image to file", inputSchema: { type: "object", properties: { action: { type: "string", enum: ["get_url", "save_file"], description: "Whether to get sparkline URL or save as file", }, outputPath: { type: "string", description: "Path where to save the file (only used with action=save_file)", }, chart: { type: "object", description: "Chart.js configuration for sparkline", }, width: { type: "integer", description: "Chart width in pixels (default: 100)", }, height: { type: "integer", description: "Chart height in pixels (default: 30)", }, devicePixelRatio: { type: "integer", enum: [1, 2], description: "Device pixel ratio (default: 2)", }, backgroundColor: { type: "string", description: "Background color (default: transparent)", }, }, required: ["action", "chart"], }, };
- src/tools/index.ts:76-79 (registration)Registration of the tool handler in the central TOOL_HANDLERS mapping for execution dispatching."create-sparkline-using-chartjs": { handler: handleSparklineTool, toolName: ToolNames.SPARKLINE, },
- src/tools/index.ts:40-40 (registration)Registration of the tool in the ALL_TOOLS array used to build the exported TOOLS list.{ tool: CREATE_SPARKLINE_USING_CHARTJS_TOOL, name: ToolNames.SPARKLINE },