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.

View as Markdown

<hf-candles>· loading

Tryhover a candle for its values.

Playground

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

Loading <hf-candles>

Props

tickerremounts

<HfCandles ticker="GPU·H" />

Installation

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

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

Usage

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

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

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

tickerReact proptickerTypestringDefaultGPU·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.

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.

<hf-area>

<hf-donut>

<hf-stat>

<hf-funnel>

Was this page helpful?

Related