# Line Chart Generator — image API

Generate a line chart SVG from a single `GET` request. No API key, no SDK, no client library: describe the chart in the query string and the endpoint renders it. This is the machine-readable twin of https://gui.farm/tools/charts/line-chart — the interactive editor is omitted on purpose; everything an agent needs is below.

## Endpoint

```
GET https://gui.farm/tools/charts/line-chart.svg?data=Jan:32,Feb:41,Mar:38&line=coral
```

Returns `image/svg+xml`. Data is `label:value` pairs, comma-separated (the label is optional, so `data=10,20,30` works too, with an optional `labels=` list). Colors accept a named color (see https://gui.farm/colors) or a hex value. The SVG is always transparent — `surface` only chooses label/gridline contrast (light or dark) for wherever you place it; hide both label sets for an edge-to-edge fill. Opening the same URL without `.svg` opens the interactive editor pre-loaded with that chart.

## Parameters

### Data

| Param | Accepts | Default | Notes |
| --- | --- | --- | --- |
| `data` | Label:value pairs, comma-separated (label optional) | — | The series to plot. Each item is label:value; value-only items are allowed. |
| `labels` | comma-separated text | — | Optional x-axis labels for value-only data. |

### Appearance

| Param | Accepts | Default | Notes |
| --- | --- | --- | --- |
| `line` | a color name (blue, coral, …) or hex | blue | Line, points and area-fill color. `color` is an alias. |
| `surface` | light, dark | light | Tone the chart will sit on — sets label and gridline contrast only. The background is never painted; the SVG is transparent. |
| `curve` | smooth, straight | smooth | Line interpolation. |

### Elements

| Param | Accepts | Default | Notes |
| --- | --- | --- | --- |
| `grid` | show, hide | show | Horizontal gridlines. |
| `points` | show, hide | show | Dots at each data point. |
| `area` | on, off | on | Gradient area fill under the line. |
| `xlabels` | show, hide | show | X-axis (bottom) labels. Hiding both label sets makes the chart fully edge-to-edge. |
| `ylabels` | show, hide | show | Y-axis (left) value labels. |

### Size

| Param | Accepts | Default | Notes |
| --- | --- | --- | --- |
| `width` | pixels (50–2000) | 720 | Output width, and the drawing box — the plot reflows to it. At tiny (sparkline) sizes, hide labels and grid. |
| `height` | pixels (50–2000) | 440 | Output height, and the drawing box. |

## Examples

- Revenue trend, coral: https://gui.farm/tools/charts/line-chart.svg?data=Jan:32,Feb:41,Mar:38,Apr:55,May:61,Jun:72&line=coral
- Quarterly, on a dark surface: https://gui.farm/tools/charts/line-chart.svg?data=Q1:120,Q2:150,Q3:135,Q4:180&line=teal&surface=dark
- Minimal — no labels, no grid: https://gui.farm/tools/charts/line-chart.svg?data=10,14,12,20,18,26,24,30&line=violet&xlabels=hide&ylabels=hide&grid=hide
- Straight, no area fill: https://gui.farm/tools/charts/line-chart.svg?data=Mon:8,Tue:12,Wed:9,Thu:15,Fri:11&line=blue&curve=straight&area=off

## Use it inside a .gui file

Because the endpoint is a stable image URL, a `.gui` screen embeds a chart as a plain `<img>` — nothing to download or unzip. The chart stays live text an agent can read and edit.

```xml
<gui version="0.2" name="Monthly revenue">
  <col w="360" p="20" gap="14" fill="#ffffff" radius="24">
    <text value="Monthly revenue" font-size="19" font-weight="700" color="#111827" />
    <img src="https://gui.farm/tools/charts/line-chart.svg?data=Jan:32,Feb:41,Mar:38,Apr:55,May:61,Jun:72&line=teal&width=640&height=360" w="320" h="180" radius="16" />
    <text value="Up 18% since January" font-size="14" color="#6b7280" />
  </col>
</gui>
```

---