Sparkline

A trend line with no axes: “which way, and how bumpy”, nothing else. One marker on the latest point, ringed in the surface colour so it stays legible where it lands on the line. The range is in the SVG title for hover.

Source

Import

import { Sparkline } from "@flanksource/clicky-ui/data";

Demos

Default · Open in Storybook

Coloured · Open in Storybook

Compact · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
className	string	—	—
color	string	chartColor(0)	Any CSS colour; defaults to the first categorical slot.
height*	number	—	—
values*	number[]	—	—
width*	number	—	—