# `PetalComponents.Sparkline`
[🔗](https://github.com/petalframework/petal_components/blob/v4.16.1/lib/petal_components/sparkline.ex#L1)

A tiny inline trend line rendered as pure server-side SVG — zero JavaScript,
works everywhere (stat cards, table cells, emails).

    <.sparkline data={[4, 7, 5, 9, 8, 12, 11, 14]} class="w-24 h-8 text-primary-500" />

The line inherits `currentColor`, so you color it with a text class. Set the
size with width/height classes; the stroke keeps its width at any size.

# `sparkline`

Renders an inline SVG sparkline.

## Attributes

* `data` (`:list`) (required) - a list of numbers (2 or more points).
* `smooth` (`:boolean`) - curve through the points instead of straight segments. Defaults to `true`.
* `fill` (`:boolean`) - shade the area under the line at low opacity. Defaults to `true`.
* `stroke_width` (`:any`) - Defaults to `2`.
* `class` (`:any`) - size + color, e.g. "w-24 h-8 text-success-500". Defaults to `nil`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*