Skip to main content
The chart template renders interactive charts using Chart.js configuration.
Not the same as the Chart component in @std/dynamic. The top-level chart template and the Chart component used inside an @std/dynamic tree are rendered by two different components with different prop shapes — components/templates/ChartRenderer.tsx for the top-level template, and the entry in lib/json-render/catalog.ts for @std/dynamic. If you’re composing a dashboard, use the shape documented in Dynamic Template. A payload that renders correctly in one context will not work in the other.

​
Content Schema

​
content.type
string
required
Chart type: bar, line, pie, doughnut, radar, polarArea, scatter, bubble
​
content.data
object
required
Chart.js data configuration with labels and datasets
​
content.options
object
Chart.js options for customization (scales, plugins, etc.)

​
Supported Chart Types

TypeDescription
barVertical or horizontal bar charts
lineLine charts with optional fill
piePie charts
doughnutDoughnut charts
radarRadar/spider charts
polarAreaPolar area charts
scatterScatter plots
bubbleBubble charts

​
Example: Bar Chart

curl -X POST https://genui.sh/api/artifacts \
  -H "Authorization: Bearer $GENUI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "chart",
    "title": "Monthly Sales",
    "content": {
      "type": "bar",
      "data": {
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        "datasets": [{
          "label": "Sales ($)",
          "data": [12000, 19000, 15000, 25000, 22000, 30000],
          "backgroundColor": "#3b82f6"
        }]
      },
      "options": {
        "responsive": true,
        "plugins": {
          "legend": {"position": "top"}
        }
      }
    }
  }'

import requests

response = requests.post(
    "https://genui.sh/api/artifacts",
    headers={"Authorization": f"Bearer {GENUI_API_KEY}"},
    json={
        "template": "chart",
        "title": "Monthly Sales",
        "content": {
            "type": "bar",
            "data": {
                "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                "datasets": [{
                    "label": "Sales ($)",
                    "data": [12000, 19000, 15000, 25000, 22000, 30000],
                    "backgroundColor": "#3b82f6"
                }]
            },
            "options": {
                "responsive": True,
                "plugins": {"legend": {"position": "top"}}
            }
        }
    }
)

const response = await fetch('https://genui.sh/api/artifacts', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${GENUI_API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    template: 'chart',
    title: 'Monthly Sales',
    content: {
      type: 'bar',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: 'Sales ($)',
          data: [12000, 19000, 15000, 25000, 22000, 30000],
          backgroundColor: '#3b82f6'
        }]
      },
      options: {
        responsive: true,
        plugins: { legend: { position: 'top' } }
      }
    }
  })
});

payload := map[string]interface{}{
    "template": "chart",
    "title":    "Monthly Sales",
    "content": map[string]interface{}{
        "type": "bar",
        "data": map[string]interface{}{
            "labels": []string{"Jan", "Feb", "Mar", "Apr", "May", "Jun"},
            "datasets": []map[string]interface{}{{
                "label":           "Sales ($)",
                "data":            []int{12000, 19000, 15000, 25000, 22000, 30000},
                "backgroundColor": "#3b82f6",
            }},
        },
    },
}

response = http.post(uri, {
  template: 'chart',
  title: 'Monthly Sales',
  content: {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      datasets: [{
        label: 'Sales ($)',
        data: [12000, 19000, 15000, 25000, 22000, 30000],
        backgroundColor: '#3b82f6'
      }]
    }
  }
}.to_json)

let response = client.post("https://genui.sh/api/artifacts")
    .header("Authorization", format!("Bearer {}", api_key))
    .json(&json!({
        "template": "chart",
        "title": "Monthly Sales",
        "content": {
            "type": "bar",
            "data": {
                "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                "datasets": [{
                    "label": "Sales ($)",
                    "data": [12000, 19000, 15000, 25000, 22000, 30000],
                    "backgroundColor": "#3b82f6"
                }]
            }
        }
    }))
    .send().await?;

var response = await client.PostAsJsonAsync("https://genui.sh/api/artifacts", new {
    template = "chart",
    title = "Monthly Sales",
    content = new {
        type = "bar",
        data = new {
            labels = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" },
            datasets = new[] {
                new {
                    label = "Sales ($)",
                    data = new[] { 12000, 19000, 15000, 25000, 22000, 30000 },
                    backgroundColor = "#3b82f6"
                }
            }
        }
    }
});

​
Example: Line Chart with Multiple Datasets

{
  "template": "chart",
  "title": "Traffic Comparison",
  "content": {
    "type": "line",
    "data": {
      "labels": ["Week 1", "Week 2", "Week 3", "Week 4"],
      "datasets": [
        {
          "label": "2023",
          "data": [1000, 1200, 1100, 1400],
          "borderColor": "#6b7280",
          "fill": false
        },
        {
          "label": "2024",
          "data": [1500, 1800, 2000, 2200],
          "borderColor": "#3b82f6",
          "fill": false
        }
      ]
    }
  }
}

​
Example: Pie Chart

{
  "template": "chart",
  "title": "Market Share",
  "content": {
    "type": "pie",
    "data": {
      "labels": ["Product A", "Product B", "Product C"],
      "datasets": [{
        "data": [45, 30, 25],
        "backgroundColor": ["#3b82f6", "#10b981", "#f59e0b"]
      }]
    }
  }
}

​
Use Cases

  • Analytics dashboards: Traffic, revenue, user metrics
  • Reports: Visual data summaries
  • Comparisons: Before/after, year-over-year
  • Distributions: Market share, survey results