# `graph`

```strand
element graph(float | [float] -> value): node
```

A sparkline with its own history: `graph cpu.usage { history: 60s }`.
Only the new column repaints. Of a value that exists at file scope (a
service field, or an expression over service fields, file-level
`let`s, `state`s and settings, and constants) it shows the last
`history` as soon as it mounts, with time asleep as a gap; of one
tied to a list item, a component's parameter or `let`, an element's
state or the animation clock, or with a `history` that is not a
constant (a literal, or a file-level `let` of one), what came since
it mounted. A list is several series in one graph, each with its own
history, drawn over one another against one `range`, the first at the
back: `graph cpu.cores`, `graph [cpu.usage, memory.usage] { color:
$accent, $tertiary }`. Its columns are whole periods of the boot
clock, the same columns whenever its frames come, and its value does
not spring: `smooth` eases it.

It takes no children.

Also every prop and event of [`node`](/reference/elements/node.html.md).

| Prop | Type | |
| --- | --- | --- |
| `history` | `duration` | How much history it keeps and shows (60 s when unset). |
| `range` | `(float \| auto, float \| auto) \| auto` | The values its bottom and top stand for: `range: 0, 100`; `auto` (or `auto` for one end, `range: 0, auto`) fits what it shows, on a 1, 2, 5 ladder, growing at once and narrowing only once the values shown fit four fifths of a smaller step (0 to 1 when unset). A value outside a fixed range is drawn at its nearer end. |
| `style` | `GraphStyle` | `line` (a line through its values), `steps` (each value held flat across its column, snapped to whole pixels, with square risers) or `bars` (a bar per value, `line_width` wide and `gap` apart). |
| `color` | `color \| [color]` | The line's colour (inherited when unset, as every node's), or a list, one per series (taken in turn when there are more series than colours; one colour serves them all). |
| `fill` | `paint \| [paint]` | The paint under the line, laid over the graph's box (a gradient fades as written: `linear(180deg, $accent.alpha(0.4), $accent.alpha(0))`), or a list, one per series; under `style: bars`, the bars' own paint. |
| `line_width` | `length` | The line's width (1.5 px when unset); under `style: bars`, each bar's (2 px when unset). |
| `gap` | `length` | Under `style: bars`, the space between bars (1 px when unset). |
| `smooth` | `float` | Smoothing: 0 (unset) follows the value; towards 1 each column moves less of the way to it. |