# Candlesticks
> Live candlestick chart with dithered bodies, wicks, volume and a last-price line; the last candle ticks and a new one opens every 5.6 s.
- Element: `<hf-candles>`
- React: `import { HfCandles } from "@/components/lumesec/hf-candles"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-candles.json
- Page: https://elements.lumesec.ai/components/pixel-hd/candles



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

```html
<hf-candles ticker="GPU·H"></hf-candles>
```

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

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-candles.json
```

## Usage

React:

```tsx
import { HfCandles } from "@/components/lumesec/hf-candles";

export function Example() {
  return (
    <HfCandles ticker="GPU·H" />
  );
}
```

HTML:

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

<hf-candles ticker="GPU·H"></hf-candles>
```

## Behaviour

Live OHLC with dithered bodies, wicks, volume and a dotted last-price line. The last candle ticks and a new one opens every few seconds with a flash.

## API reference

### Attributes

| Attribute | React prop | Type     | Default | Description                                                                            |
| --------- | ---------- | -------- | ------- | -------------------------------------------------------------------------------------- |
| `ticker`  | `ticker`   | `string` | `GPU·H` | Symbol shown in the header and used in the chart's `aria-label`. Read once on connect. |

## Accessibility

* The canvas has `role="img"` and `aria-label` `<ticker> price, last 56 periods`.
* The OHLC readout has `aria-live="off"`; price and change are plain text.
* Per-candle readouts appear on hover only.
* Reduced motion: the data keeps updating, but candles draw without the intro, a new candle does not flash, the live dot does not blink and the price changes without rolling.

## 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 `--foreground`, `--lumesec`, `--lumesec-foreground`, `--lumesec-success`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-fg`, `--ui-mono`, `--ui-muted`, `--ui-ok`, `--ui-on-accent` and `--ui-raised`.

## Notes

* Prices are demo data from a seeded random walk: 56 candles, updated every 700 ms, with a new candle every eighth update. There is no way to supply data.
* Updates pause while the element is off-screen and stop when it is removed from the page.
* The change figure compares the last close with the first open. The chart is 200px tall and fills the width.