UiSvelte

Candlestick

Candlestick charts display financial data showing the open, high, low, and close prices for a specific time period. Features interactive zoom and scroll for analyzing large datasets.

Preview

67.4778.2989.1099.92110.73121.551/11/101/191/282/62/15

Builder

Bullish Color
Bearish Color
Display Options
Zoom & Scroll
Visible Candles
Initial Visible 50
Min Visible 10
Max Visible 100
States
Dimensions
Candle Width 8
Wick Width 1

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

CandleData Type

Each data point in the data array should follow this structure:

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Margin Type

The margin object defines the spacing around the chart:

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Color Type

Available color options for bullish and bearish candles:

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Interactive Features

  • Zoom: Use mouse wheel or trackpad to zoom in/out on the chart
  • Scroll: Click and drag to pan through historical data
  • Touch Support: Full touch gesture support for mobile devices
  • Scrollbar: Visual indicator showing the current position in the dataset

© 2025 UiSvelte