Skip to main content

Documentation Index

Fetch the complete documentation index at: https://genui.sh/docs/llms.txt

Use this file to discover all available pages before exploring further.

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"}
        }
      }
    }
  }'

​
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