Skip to main content
Glama

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
NameRequiredDescriptionDefault
actionYesWhether to get sparkline URL or save as file
outputPathNoPath where to save the file (only used with action=save_file)
chartYesChart.js configuration for sparkline
widthNoChart width in pixels (default: 100)
heightNoChart height in pixels (default: 30)
devicePixelRatioNoDevice pixel ratio (default: 2)
backgroundColorNoBackground color (default: transparent)

Implementation Reference

  • 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)
          }`
        );
      }
    }
  • 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"],
      },
    };
  • Registration of the tool handler in the central TOOL_HANDLERS mapping for execution dispatching.
    "create-sparkline-using-chartjs": {
      handler: handleSparklineTool,
      toolName: ToolNames.SPARKLINE,
    },
  • 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 },
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden but only mentions the two action outcomes without explaining behavioral aspects like whether this generates external URLs, file system access requirements, performance characteristics, error handling, or what happens with invalid chart configurations. For a tool with 7 parameters and no annotation coverage, this is insufficient.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is extremely concise with just one sentence that efficiently communicates the core functionality. It's front-loaded with the main purpose and wastes no words on unnecessary elaboration.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with 7 parameters, nested objects, no annotations, and no output schema, the description is inadequate. It doesn't explain what a sparkline is, what the output looks like, how the chart configuration should be structured, or provide any examples. The agent would need to rely heavily on the schema alone.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents all parameters thoroughly. The description adds minimal value by mentioning the two action types, but doesn't provide additional context about parameter interactions, default behaviors, or usage patterns beyond what's in the schema descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'create' and resource 'sparkline charts using Chart.js', and specifies two output options (get URL or save file). It distinguishes from siblings by focusing on sparklines specifically, though it doesn't explicitly contrast with other chart creation tools.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided about when to use this tool versus alternatives like 'create-chart-using-chartjs' or other visualization siblings. The description mentions two action types but doesn't explain when to choose one over the other or provide any context about appropriate use cases.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/TakanariShimbo/quickchart-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server