Area chart

Area chart with a bright line over a dithered fill; ranges morph into each other and hover adds a crosshair and the value.

View as Markdown

<hf-area>· loading

Tryswitch to 90D, then hover.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-area>

Props

labelremounts

daysremounts

<HfArea label="Tokens per day" days={30} />

Installation

pnpm dlx shadcn@latest add @lumesec/hf-area

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/hf-area.json

Usage

import { HfArea } from "@/components/lumesec/hf-area";

export function Example() {
  return (
    <HfArea label="Tokens per day" />
  );
}

Behaviour

A bright line over a dithered fill that thins toward the bottom. Ranges morph into each other; hovering adds a crosshair, a bloom on the point and the value in the header.

API reference

Attributes

labelReact proplabelTypestringDefaultTokens per day

Header label and start of the chart aria-label. Also seeds the generated data.

daysReact propdaysTypenumberDefault30

Initial range in days. The range buttons offer 7, 30 and 90.

Accessibility

The canvas has role="img" and an aria-label of the form <label>, last <n> days, <first> to <last>.
The range buttons are native buttons in a role="group" labelled Range, with aria-pressed.
Hovered values and dates are pointer-only.
Reduced motion: the line is drawn in full at once, range changes swap without morphing, the header value changes without rolling and the canvas redraws only on input.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --border, --card, --foreground, --lumesec, --muted and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-fg, --ui-font, --ui-muted, --ui-raised, --ui-surface and --ui-track.

Notes

Data is generated demo data seeded from label; there is no attribute for real values.
The header shows the latest value, or the hovered day, and the change from the first to the last day of the range.
Attributes are read once on connect and are not observed.

<hf-donut>

<hf-stat>

<hf-funnel>

<hf-barlist>

Was this page helpful?

Related