External Chart Libraries

Generate chart data and configuration for popular libraries like shadcn/ui, ApexCharts, Chart.js, and Recharts.

Overview

Instead of generating static images, DataShows can return processed data and configuration ready for your favorite charting library. This gives you:

🎨 Full Customization

Receive a configuration object you can customize to match your design system perfectly.

🤖 AI-Powered Config

AI handles data transformation and generates optimal configuration automatically.

Supported Libraries

shadcn/ui Charts (Recharts)

Modern, accessible React charts built on Recharts. Perfect for Next.js apps with Tailwind CSS.

json

// AI generates config in shadcn format
{
  "type": "bar",
  "xKey": "month",
  "yKeys": ["sales", "expenses"],
  "colors": {
    "sales": "hsl(var(--chart-1))",
    "expenses": "hsl(var(--chart-2))"
  }
}

ApexCharts

Feature-rich charting library with extensive customization options.

json

// AI generates ApexCharts config
{
  "chart": { "type": "line", "height": 350 },
  "series": [{
    "name": "Sales",
    "data": [{"x": "Jan", "y": 100}]
  }],
  "xaxis": { "type": "category" }
}

Chart.js

Simple yet flexible JavaScript charting library.

json

// AI generates Chart.js config
{
  "type": "line",
  "data": {
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [{
      "label": "Sales",
      "data": [100, 150, 200],
      "borderColor": "rgb(75, 192, 192)"
    }]
  },
  "options": { "responsive": true }
}

Recharts

Composable charting library built on React components.

json

// AI generates Recharts config
{
  "type": "area",
  "xKey": "date",
  "yKeys": ["revenue"],
  "colors": { "revenue": "#8884d8" }
}

Usage Examples

React SDK (Client-Side)

typescript

import { useGenerateChart } from "datashows-sdk/react";
import { ChartContainer } from "@/components/ui/chart";
import { BarChart, Bar, XAxis, YAxis } from "recharts";

function MyChart() {
  const [chartData, setChartData] = useState(null);

  const generate = useGenerateChart({
    onSuccess: (result) => {
      if (result.kind === "chartData") {
        setChartData(result);
      }
    }
  });

  const handleGenerate = () => {
    generate.mutate({
      data: yourData,
      prompt: "Create a bar chart using shadcn/ui",
      outputFormat: "chartData", // Request chart data format
      apiKey: "your-api-key"
    });
  };

  if (!chartData) {
    return <button onClick={handleGenerate}>Generate Chart</button>;
  }

  return (
    <div>
      <p className="text-sm text-muted-foreground mb-4">
        {chartData.explanation}
      </p>
      <ChartContainer config={chartData.config}>
        <BarChart data={chartData.data}>
          <XAxis dataKey={chartData.config.xKey} />
          <YAxis />
          {chartData.config.yKeys.map((key) => (
            <Bar
              key={key}
              dataKey={key}
              fill={chartData.config.colors[key]}
            />
          ))}
        </BarChart>
      </ChartContainer>
    </div>
  );
}

Server SDK (Node.js)

typescript

import { generateChart } from "datashows-sdk/node";

const result = await generateChart({
  data: salesData,
  prompt: "Line chart showing revenue trends",
  outputFormat: "chartData", // Request chart data format
  apiKey: process.env.DATASHOWS_API_KEY
});

if (result.kind === "chartData") {
  console.log("Library:", result.library);    // "shadcn", "apexcharts", etc.
  console.log("Data:", result.data);          // Processed data array
  console.log("Config:", result.config);      // Chart configuration
  console.log("Explanation:", result.explanation); // AI insights
  
  // Use with your library
  renderChartWithLibrary(result.library, result.data, result.config);
}

Direct API (cURL)

bash

curl -X POST https://app.datashows.ai/api/generate-chart \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer your-api-key" \
  -d '{
    "data": [
      {"month": "Jan", "sales": 100},
      {"month": "Feb", "sales": 150}
    ],
    "prompt": "Bar chart of sales by month",
    "outputFormat": "chartData"
  }'

API Response Format

json

{
  "kind": "chartData",
  "library": "shadcn",
  "data": [
    { "month": "Jan", "sales": 100 },
    { "month": "Feb", "sales": 150 }
  ],
  "config": {
    "type": "bar",
    "xKey": "month",
    "yKeys": ["sales"],
    "colors": { "sales": "hsl(var(--chart-1))" }
  },
  "explanation": "Created a bar chart showing sales growth of 50%.",
  "usage": {
    "remainingGenerations": 499,
    "extraCostCents": 0,
    "totalCostCents": 900
  }
}

Try It Live

Interactive Playground

Experience the external libraries feature with a live demo using shadcn/ui charts. Test the API and see real-time chart generation with processed data and configuration.

Try It in Playground

Best Practices

✅ Specify Library in Prompt

Hint which library to use for better results:

typescript

prompt: "Create a shadcn/ui bar chart showing sales by region"

✅ Validate Response Type

Always check the response kind:

typescript

if (result.kind === "chartData") {
  // Handle chart data
  renderChart(result.data, result.config);
}

✅ Customize Configuration

The returned config is a starting point - customize it:

typescript

const customConfig = {
  ...result.config,
  colors: myBrandColors,
  // Add your customizations
};

Pricing

Chart data generation counts the same as image generation:

Free Trial: 25 generations/week
Start-up Plan: 500 generations/month ($9/month + $0.02 per extra)
Enterprise: Unlimited