# Chart

> Render simple bar, line, and area charts from tabular data.

**URL:** https://inference.sh/docs/agents/widgets/chart
**Last updated:** 2026-09-18

---

Render simple bar, line, and area charts from tabular data.

## Preview

```
│     ▄▄
│  ▄▄ ██ ▄▄
│  ██ ██ ██
└─────────────
   Jan Feb Mar
```

## Usage

```go
node := models.WidgetNode{
    Type:   models.WidgetNodeTypeChart,
    Height: 240,
    Data: []map[string]interface{}{
        {"date": "2025-01-01", "Desktop": 100, "Mobile": 200},
        {"date": "2025-01-02", "Desktop": 200, "Mobile": 100},
        {"date": "2025-01-03", "Desktop": 150, "Mobile": 150},
    },
    Series: []models.ChartSeries{
        {Type: "bar", DataKey: "Desktop"},
        {Type: "bar", DataKey: "Mobile"},
    },
    XAxis: "date",
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"chart"` | Node type | required |
| `data` | `array` | Tabular dataset; each object is a data row | required |
| `series` | `ChartSeries[]` | Series definitions for rendering | required |
| `xAxis` | `string \| object` | X-axis configuration or data key | required |
| `height` | `number \| string` | Chart height | - |
| `width` | `number \| string` | Chart width | - |
| `showYAxis` | `boolean` | Show left y-axis with labels | `false` |
| `showLegend` | `boolean` | Display legend | `true` |
| `showTooltip` | `boolean` | Show tooltip on hover | `true` |
| `barGap` | `number` | Gap in px between bars in same category | - |
| `barCategoryGap` | `string` | Gap between bar categories | - |

### ChartSeries Types

**BarSeries:**
```go
{Type: "bar", DataKey: "Desktop", Label: "Desktop Users", Color: "blue"}
```

**LineSeries:**
```go
{Type: "line", DataKey: "Revenue", CurveType: "natural"}
```

**AreaSeries:**
```go
{Type: "area", DataKey: "Users", CurveType: "monotone", Stack: "total"}
```

### Series Props

| Name | Type | Description |
|------|------|-------------|
| `type` | `"bar" \| "line" \| "area"` | Series type |
| `dataKey` | `string` | Key in data rows for values |
| `label` | `string` | Legend/tooltip label |
| `color` | `string` | Color token or CSS color |
| `curveType` | `string` | Curve interpolation (line/area) |
| `stack` | `string` | Stack group ID (bar/area) |

### Color Tokens

`blue`, `purple`, `orange`, `green`, `red`, `yellow`, `pink`

### Curve Types

`linear`, `natural`, `monotone`, `step`, `stepBefore`, `stepAfter`, `basis`, `bump`

## Examples

### Bar Chart

```go
{
    Type:   models.WidgetNodeTypeChart,
    Height: 200,
    Data: []map[string]interface{}{
        {"month": "Jan", "sales": 400},
        {"month": "Feb", "sales": 300},
        {"month": "Mar", "sales": 500},
    },
    Series: []models.ChartSeries{
        {Type: "bar", DataKey: "sales", Color: "blue"},
    },
    XAxis: "month",
}
```

### Line Chart

```go
{
    Type:   models.WidgetNodeTypeChart,
    Height: 200,
    Data: []map[string]interface{}{
        {"date": "2025-01-01", "users": 100},
        {"date": "2025-01-02", "users": 150},
        {"date": "2025-01-03", "users": 120},
    },
    Series: []models.ChartSeries{
        {Type: "line", DataKey: "users", CurveType: "natural"},
    },
    XAxis:     "date",
    ShowYAxis: true,
}
```

### Stacked Area Chart

```go
{
    Type:   models.WidgetNodeTypeChart,
    Height: 240,
    Data: data,
    Series: []models.ChartSeries{
        {Type: "area", DataKey: "Desktop", Stack: "total", Color: "blue"},
        {Type: "area", DataKey: "Mobile", Stack: "total", Color: "green"},
    },
    XAxis: "date",
}
```

### Multi-series Comparison

```go
{
    Type:   models.WidgetNodeTypeChart,
    Height: 300,
    Data: monthlyData,
    Series: []models.ChartSeries{
        {Type: "bar", DataKey: "lastYear", Label: "Last Year", Color: "gray"},
        {Type: "bar", DataKey: "thisYear", Label: "This Year", Color: "blue"},
    },
    XAxis:      "month",
    ShowLegend: true,
}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "chart",
  height: 240,
  data: [
    { date: "2025-01-01", Desktop: 100, Mobile: 200 },
    { date: "2025-01-02", Desktop: 200, Mobile: 100 },
  ],
  series: [
    { type: "bar", dataKey: "Desktop" },
    { type: "bar", dataKey: "Mobile" },
  ],
  xAxis: "date",
}
```

## Best Practices

1. **Set explicit height** - Charts need a defined height
2. **Keep data concise** - 5-20 data points is ideal
3. **Use meaningful colors** - Color-code related series
4. **Show legend for multi-series** - Help users understand data
5. **Consider mobile** - Charts may need adjusting for small screens