Chart API Documentation

{
  "type": "bar",
  "theme": "modern",
  "data": {
    "labels": ["Q1", "Q2", "Q3"],
    "datasets": [{
      "label": "Revenue",
      "data": [100, 200, 300]
    }]
  },
  "options": {
    "title": "Quarterly Revenue"
  },
  "width": 800,
  "height": 400,
  "format": "png"
}

<img src="https://api.chartone.dev/v1/chart?type=bar&data={"labels":["A","B","C"],"datasets":[{"data":[10,20,30]}]}&theme=modern&width=600&height=400">

<img src="https://api.chartone.dev/v1/chart?apiKey=YOUR_API_KEY&type=bar&data={"labels":["Q1","Q2","Q3","Q4"],"datasets":[{"label":"Sales","data":[120,190,300,250]}]}&xAxis=Quarter&yAxis=Revenue ($)&highlight=3&theme=modern&width=800&height=400">

{
  "chartConfig": {
    "type": "line",
    "data": {
      "labels": ["Jan", "Feb", "Mar"],
      "datasets": [{
        "label": "Revenue",
        "data": [100, 150, 200]
      }]
    }
  },
  "theme": "modern",
  "width": 800,
  "height": 400,
  "format": "png",
  "expiresInDays": 30
}

{
  "id": "abc123xyz",
  "shortUrl": "/render/abc123xyz",
  "fullUrl": "https://api.chartone.dev/render/abc123xyz",
  "expiresInDays": 30
}

curl -H "Authorization: Bearer YOUR_API_KEY" \
  https://api.chartone.dev/v1/usage

{
  "plan": "free",
  "period": "monthly",
  "quota": {
    "limit": 2000,
    "used": 456,
    "remaining": 1544,
    "exceeded": false
  }
}

curl https://api.chartone.dev/v1/themes

// Using new parameters for enhanced charts
const response = await fetch('https://api.chartone.dev/v1/chart', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY'
  },
  body: JSON.stringify({
    type: 'bar',
    theme: 'modern',
    data: {
      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
      datasets: [{
        label: 'Sales',
        data: [120, 190, 300, 250]
      }]
    },
    xAxis: 'Quarter',           // X-axis label
    yAxis: 'Revenue ($K)',       // Y-axis label
    targetLine: {                // Target line with label
      value: 200,
      label: 'Goal'
    },
    averageLine: true,           // Show average line
    highlight: '3',              // Highlight Q3 (1-based index)
    width: 800,
    height: 400
  })
});

async function generateChart() {
  const response = await fetch('https://api.chartone.dev/v1/chart', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_API_KEY'
    },
    body: JSON.stringify({
      type: 'bar',
      theme: 'modern',
      data: {
        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
        datasets: [{
          label: 'Revenue',
          data: [120, 190, 300, 500]
        }]
      }
    })
  });

  const blob = await response.blob();
  const url = URL.createObjectURL(blob);
  document.getElementById('chart').src = url;
}

import requests

def generate_chart():
    response = requests.post(
        'https://api.chartone.dev/v1/chart',
        headers={
            'Authorization': 'Bearer YOUR_API_KEY',
            'Content-Type': 'application/json'
        },
        json={
            'type': 'bar',
            'theme': 'modern',
            'data': {
                'labels': ['Q1', 'Q2', 'Q3', 'Q4'],
                'datasets': [{
                    'label': 'Revenue',
                    'data': [120, 190, 300, 500]
                }]
            }
        }
    )

    with open('chart.png', 'wb') as f:
        f.write(response.content)

import React, { useEffect, useState } from 'react';

function ChartImage() {
  const [chartUrl, setChartUrl] = useState('');

  useEffect(() => {
    async function generateChart() {
      const response = await fetch('https://api.chartone.dev/v1/chart', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_API_KEY'
        },
        body: JSON.stringify({
          type: 'bar',
          theme: 'modern',
          data: {
            labels: ['Q1', 'Q2', 'Q3', 'Q4'],
            datasets: [{
              label: 'Revenue',
              data: [120, 190, 300, 500]
            }]
          }
        })
      });

      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      setChartUrl(url);
    }

    generateChart();
  }, []);

  return chartUrl ? <img src={chartUrl} alt="Chart" /> : <p>Loading...</p>;
}