Documentation

Everything you need to integrate Chart Splat into your application

Quick Start

Get started in minutes

SDK & Clients

Official and generated clients

OpenAPI Spec

Generate your own clients

Quick Start

1. Get your API key

Sign up for free and create an API key from your dashboard.

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" />;
}

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

Go

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

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

HeaderRequiredDescription
X-Api-KeyYes*YOUR_API_KEY (recommended)
AuthorizationYes*Bearer YOUR_API_KEY (alternative)
Content-TypeYesapplication/json

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

Request Body

FieldTypeDefaultDescription
typestring"line"Chart type: line, bar, pie, doughnut, radar, polarArea
data.labelsstring[]-Labels for X-axis or segments (required)
data.datasetsarray-Array of datasets (required)
options.widthnumber800Image width in pixels
options.heightnumber600Image height in pixels

Response Headers

HeaderDescription
X-RateLimit-LimitYour monthly request limit
X-RateLimit-RemainingRequests remaining this month
X-RateLimit-ResetWhen the limit resets (ISO 8601)

Rate Limits

PlanRequests/MonthAPI Keys
Free1001
Pro10,0005
EnterpriseUnlimitedUnlimited

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.