> ## 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.

# Chart Template

> Create interactive data visualizations

The `chart` template renders interactive charts using Chart.js configuration.

<Note>
  **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](/templates/dynamic). A payload that renders correctly in one context will not work in the other.
</Note>

## Content Schema

<ParamField body="content.type" type="string" required>
  Chart type: `bar`, `line`, `pie`, `doughnut`, `radar`, `polarArea`, `scatter`, `bubble`
</ParamField>

<ParamField body="content.data" type="object" required>
  Chart.js data configuration with `labels` and `datasets`
</ParamField>

<ParamField body="content.options" type="object">
  Chart.js options for customization (scales, plugins, etc.)
</ParamField>

## Supported Chart Types

| Type        | Description                       |
| ----------- | --------------------------------- |
| `bar`       | Vertical or horizontal bar charts |
| `line`      | Line charts with optional fill    |
| `pie`       | Pie charts                        |
| `doughnut`  | Doughnut charts                   |
| `radar`     | Radar/spider charts               |
| `polarArea` | Polar area charts                 |
| `scatter`   | Scatter plots                     |
| `bubble`    | Bubble charts                     |

## Example: Bar Chart

<CodeGroup>
  ```bash curl theme={null}
  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"}
          }
        }
      }
    }'
  ```

  ```python Python theme={null}
  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"}}
              }
          }
      }
  )
  ```

  ```javascript JavaScript theme={null}
  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' } }
        }
      }
    })
  });
  ```

  ```go Go theme={null}
  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",
              }},
          },
      },
  }
  ```

  ```ruby Ruby theme={null}
  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)
  ```

  ```rust Rust theme={null}
  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?;
  ```

  ```csharp .NET theme={null}
  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"
                  }
              }
          }
      }
  });
  ```
</CodeGroup>

## Example: Line Chart with Multiple Datasets

```json theme={null}
{
  "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

```json theme={null}
{
  "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