Documentation

Everything you need to integrate Chart Splat into your application

Quick Start

Get started in minutes

SDK & Clients

Official and generated clients

CLI Tool

Generate charts from terminal

MCP Server

AI agent integration

OpenAPI Spec

Generate your own clients

Quick Start

1. Get your API key

2. Make your first request

bash

curl -X POST https://api.chartsplat.com/chart \
  -H "X-Api-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "bar",
    "data": {
      "labels": ["Jan", "Feb", "Mar", "Apr"],
      "datasets": [{
        "label": "Revenue",
        "data": [12, 19, 3, 5],
        "backgroundColor": "#8b5cf6"
      }]
    }
  }'

3. Use the response

The API returns a base64-encoded PNG image that you can use directly in HTML:

json

{
  "image": "data:image/png;base64,iVBORw0KGgo...",
  "format": "png",
  "width": 800,
  "height": 600
}

Official SDK

Install the npm package

bash

npm install chartsplat

TypeScript / JavaScript

typescript

import { ChartSplat } from 'chartsplat';

const client = new ChartSplat('YOUR_API_KEY');

// Generate a bar chart
const chart = await client.generateChart({
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{
      label: 'Revenue',
      data: [12, 19, 3, 5],
      backgroundColor: '#8b5cf6'
    }]
  }
});

// Use the image
console.log(chart.image); // data:image/png;base64,...

// Or save to file (Node.js)
import fs from 'fs';
const base64Data = chart.image.replace(/^data:image\/png;base64,/, '');
fs.writeFileSync('chart.png', Buffer.from(base64Data, 'base64'));

React Example

tsx

import { ChartSplat } from 'chartsplat';
import { useState, useEffect } from 'react';

const client = new ChartSplat('YOUR_API_KEY');

function MyChart() {
  const [chartUrl, setChartUrl] = useState<string | null>(null);

  useEffect(() => {
    async function loadChart() {
      const chart = await client.generateChart({
        type: 'line',
        data: {
          labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
          datasets: [{
            label: 'Visitors',
            data: [100, 200, 150, 300, 250],
            borderColor: '#ec4899'
          }]
        }
      });
      setChartUrl(chart.image);
    }
    loadChart();
  }, []);

  if (!chartUrl) return <div>Loading...</div>;
  return <img src={chartUrl} alt="Chart" />;
}

CLI Tool

Generate charts from your terminal. Perfect for scripting, automation, and quick visualizations.

Install

bash

npm install -g chartsplat-cli

Set API Key

bash

export CHARTSPLAT_API_KEY=your-api-key-here

Quick Examples

Bar Chart

bash

chartsplat bar -l "Q1,Q2,Q3,Q4" -d "50,75,60,90" -o chart.png

Line Chart with Title

bash

chartsplat line -l "Mon,Tue,Wed,Thu,Fri" -d "5,9,3,7,2" --title "Weekly Traffic" -o traffic.png

Pie Chart with Color

bash

chartsplat pie -l "Apple,Samsung,Other" -d "40,30,30" -c "#8b5cf6" -o market.png

Options

Option	Description
-l, --labels	Comma-separated labels
-d, --data	Comma-separated values
-t, --title	Chart title
-c, --color	Background color (hex)
-w, --width	Image width (default: 800)
--height	Image height (default: 600)
-o, --output	Output file path
--config	JSON config file

Config Files

For complex charts with multiple datasets, use a config file:

bash

chartsplat init -o my-chart.json
# Edit the file, then:
chartsplat bar --config my-chart.json -o output.png

MCP Server (AI Agents)

Use Chart Splat directly from AI agents like Claude Desktop and other MCP clients. The Model Context Protocol (MCP) is the standard for AI agent tool integration.

Setup

Add to your Claude Desktop config:

json

{
  "mcpServers": {
    "chartsplat": {
      "command": "npx",
      "args": ["-y", "chartsplat-mcp"],
      "env": {
        "CHARTSPLAT_API_KEY": "your-api-key-here"
      }
    }
  }
}

Available Tools

Tool	Description
generate_chart	Generate any chart type with full configuration
line_chart	Generate a line chart
bar_chart	Generate a bar chart
pie_chart	Generate a pie chart
doughnut_chart	Generate a doughnut chart
radar_chart	Generate a radar chart

Example

Once configured, just ask your AI agent:

“Create a bar chart showing quarterly revenue: Q1=50, Q2=75, Q3=60, Q4=90”

OpenAPI Specification

We provide a complete OpenAPI 3.1 specification that you can use to generate clients in any language.

Download OpenAPI Spec

Generate Clients with OpenAPI Generator

Use OpenAPI Generator to create clients for 50+ languages:

Python

bash

npx @openapitools/openapi-generator-cli generate -i https://chartsplat.com/openapi.yaml -g python -o ./chartsplat-python

bash

npx @openapitools/openapi-generator-cli generate -i https://chartsplat.com/openapi.yaml -g go -o ./chartsplat-go

Java

bash

npx @openapitools/openapi-generator-cli generate -i https://chartsplat.com/openapi.yaml -g java -o ./chartsplat-java

Ruby

bash

npx @openapitools/openapi-generator-cli generate -i https://chartsplat.com/openapi.yaml -g ruby -o ./chartsplat-ruby

Other Tools

Swagger Codegen - Alternative client generator
openapi-typescript - TypeScript types from OpenAPI
Stoplight - API design and documentation platform

Chart Types & Examples

Line Chart

{
  "type": "line",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May"],
    "datasets": [{
      "label": "Sales",
      "data": [12, 19, 3, 5, 2],
      "borderColor": "#3b82f6",
      "fill": false
    }]
  }
}

Bar Chart

{
  "type": "bar",
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [{
      "label": "Revenue",
      "data": [50, 60, 70, 80],
      "backgroundColor": "#10b981"
    }]
  }
}

Pie Chart

{
  "type": "pie",
  "data": {
    "labels": ["Red", "Blue", "Yellow"],
    "datasets": [{
      "data": [30, 50, 20],
      "backgroundColor": [
        "#ef4444", "#3b82f6", "#eab308"
      ]
    }]
  }
}

Doughnut Chart

{
  "type": "doughnut",
  "data": {
    "labels": ["Desktop", "Mobile", "Tablet"],
    "datasets": [{
      "data": [60, 30, 10],
      "backgroundColor": [
        "#8b5cf6", "#ec4899", "#06b6d4"
      ]
    }]
  }
}

Radar Chart

{
  "type": "radar",
  "data": {
    "labels": ["Speed", "Power", "Range", "Durability", "Accuracy"],
    "datasets": [{
      "label": "Player A",
      "data": [65, 59, 90, 81, 56],
      "borderColor": "#f59e0b",
      "backgroundColor": "rgba(245, 158, 11, 0.2)"
    }]
  }
}

Polar Area Chart

{
  "type": "polarArea",
  "data": {
    "labels": ["Red", "Green", "Yellow", "Blue"],
    "datasets": [{
      "data": [11, 16, 7, 14],
      "backgroundColor": [
        "#ef4444", "#10b981", "#eab308", "#3b82f6"
      ]
    }]
  }
}

API Reference

POST/chart

Headers

Header	Required	Description
X-Api-Key	Yes*	YOUR_API_KEY (recommended)
Authorization	Yes*	Bearer YOUR_API_KEY (alternative)
Content-Type	Yes	application/json

* Use either Authorization or X-Api-Key, not both

Request Body

Field	Type	Default	Description
type	string	"line"	Chart type: line, bar, pie, doughnut, radar, polarArea
data.labels	string[]	-	Labels for X-axis or segments (required)
data.datasets	array	-	Array of datasets (required)
options.width	number	800	Image width in pixels
options.height	number	600	Image height in pixels

Response Headers

Header	Description
X-RateLimit-Limit	Your monthly request limit
X-RateLimit-Remaining	Requests remaining this month
X-RateLimit-Reset	When the limit resets (ISO 8601)

Rate Limits

Plan	Requests/Month	API Keys
Free	100	1
Pro	10,000	5
Enterprise	Unlimited	Unlimited

When you exceed your rate limit, the API returns a 429 status code.Upgrade your plan for higher limits.

Need Help?

Have questions or need assistance? Fill out the form below and we'll get back to you as soon as possible.

Try it live

Generate charts interactively in our demo.

Open Demo