General usage example

With curve

Start and End labels

Animated

Only animates when the prefers-reduced-motion media query has the value no-preference.

Waits until the sparkline is visible in the viewport to initate the animation.

Defined Animation Duration

Defined Animation Delay

Defined color

With gradient

Defined gradient color

Filled

Defined fill color

Defined endpoint color

Without endpoint

Defined endpoint radius

Defined line/stroke width

Doesn’t look great when the line-width/stroke-width is greater than the endpoint-radius!

Defined width and height

Server-rendered and hydrated

Start End