PetalComponents.Sparkline (petal_components v4.7.0)

Copy Markdown View Source

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.

Summary

Functions

Renders an inline SVG sparkline.

Functions

sparkline(assigns)

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.