# 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.
- Element: `<hf-area>`
- React: `import { HfArea } from "@/components/lumesec/hf-area"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-area.json
- Page: https://elements.lumesec.ai/components/pixel-hd/area



Live preview: https://elements.lumesec.ai/view/hf-area

```html
<hf-area label="Tokens per day"></hf-area>
```

## Playground

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

## Installation

```bash
npx shadcn@latest add @lumesec/hf-area
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-area.json
```

## Usage

React:

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

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

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-area.js"></script>

<hf-area label="Tokens per day"></hf-area>
```

## 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

| Attribute | React prop | Type     | Default          | Description                                                                      |
| --------- | ---------- | -------- | ---------------- | -------------------------------------------------------------------------------- |
| `label`   | `label`    | `string` | `Tokens per day` | Header label and start of the chart `aria-label`. Also seeds the generated data. |
| `days`    | `days`     | `number` | `30`             | 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](/docs/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.