create-sparkline-using-chartjs
Generate sparkline charts using Chart.js configuration. Obtain a direct URL or save the chart as an image file for integration into reports, dashboards, or visual analytics.
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 | |
| backgroundColor | No | Background color (default: transparent) | |
| chart | Yes | Chart.js configuration for sparkline | |
| devicePixelRatio | No | Device pixel ratio (default: 2) | |
| height | No | Chart height in pixels (default: 30) | |
| outputPath | No | Path where to save the file (only used with action=save_file) | |
| width | No | Chart width in pixels (default: 100) |
Implementation Reference
- src/tools/sparkline.ts:212-315 (handler)Main handler function that validates inputs, builds QuickChart URL, fetches PNG image, encodes to base64, returns content with image and URL, and optionally saves to file.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 including name, description, and detailed input schema 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)Maps the tool name to its handler function (handleSparklineTool) in the central tool handlers registry."create-sparkline-using-chartjs": { handler: handleSparklineTool, toolName: ToolNames.SPARKLINE, },
- src/tools/index.ts:40-40 (registration)Adds the sparkline tool to the list of all available tools.{ tool: CREATE_SPARKLINE_USING_CHARTJS_TOOL, name: ToolNames.SPARKLINE },
- src/tools/sparkline.ts:175-207 (helper)Helper function to fetch the sparkline image content from QuickChart API using axios.async function fetchSparklineContent( params: Record<string, string>, format: string = "png" ): Promise<any> { const queryString = new URLSearchParams(params).toString(); const sparklineUrl = `${QuickChartUrls.sparkline()}?${queryString}`; const axiosConfig = { responseType: "arraybuffer" as any, timeout: 30000, headers: { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36", Accept: "image/*,*/*", "Accept-Language": "en-US,en;q=0.9", "Accept-Encoding": "gzip, deflate, br", Connection: "keep-alive", }, validateStatus: (status: number) => status >= 200 && status < 300, }; try { const response = await axios.get(sparklineUrl, axiosConfig); return response.data; } catch (error) { const axiosError = error as any; const message = axiosError.response ? `Failed to fetch sparkline content from QuickChart - Status: ${axiosError.response.status}` : `Failed to fetch sparkline content from QuickChart - ${axiosError.message}`; throw new McpError(ErrorCode.InternalError, message); } }