v0.1.0

<PxSparkline />ReactNavigation & dataFree

Sparkline

Inline pixel sparkline with a dithered area, coloured green or red by trend unless a colour is set; hovering shows the value.

View as Markdown

<PxSparkline />· loading

Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

Loading <PxSparkline />

Props

colorlive

unitlive

widthlive

heightlive

React

<PxSparkline
  data={[
    31,
    35,
    33,
    40,
    38,
    44,
    47,
    45,
    52,
    58
  ]}
  width={140}
  height={32}
/>

Installation

pnpm dlx shadcn@latest add @lumesec/px-sparkline

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-sparkline.json

Usage

px-sparkline-example.tsx

import { PxSparkline } from "@/components/lumesec/px-sparkline";

export function Example() {
  return <PxSparkline data={[180, 176, 190, 184, 200, 196, 210, 205, 214, 222]} unit=" ms" label="Latency" />;
}

Behaviour

An inline pixel line with a dithered area, coloured by trend unless you set a colour. Hovering shows the value under the pointer.

API reference

Props

Also accepts every prop of <span> (React.ComponentProps<"span">), spread onto the root element.

dataTypereadonly number[]Default[4, 6, 5, 8, 7, 9, 8, 12, 10, 13]

The series. NaN entries are dropped, and fewer than two values draw nothing. A change replays the draw-in.

labelTypestringDefault"Trend"

Start of the canvas aria-label, followed by the first, last, lowest and highest value.

Line colour. Without it the line is success when the last value is at least the first, otherwise destructive.

unitTypestringDefault""

Text appended to the hover value as written; include a leading space for a spaced unit such as " ms".

widthTypenumberDefault140

Width in pixels.

heightTypenumberDefault32

Height in pixels.

Ref

ref points at the root HTMLSpanElement.

Accessibility

The canvas has role="img" and an aria-label that summarises the series, for example "Trend: from 4 to 13, low 4, high 13".
The hover value is pointer-only and is not available to keyboard or assistive technology users.
Reduced motion: the line appears at once instead of drawing in from the left.

Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --lumesec, --lumesec-shine, --lumesec-success, --destructive, --foreground and --card.

Notes

The sample series 4, 6, 5, 8, 7, 9, 8, 12, 10, 13 is drawn when data is not set.
It renders inline (inline-block, aligned to the middle), so it sits in table cells and running text.

<px-tabs>

Tabspx-tabs

<px-pagination>

Paginationpx-pagination

<px-nav>

Sidebar navpx-nav

<px-accordion>

Accordionpx-accordion

Was this page helpful?

Related