About ARS Candlestick Chart
WebGPU-rendered OHLCV candlestick chart with volume bars, configurable grid, axis labels,
order overlays, and indicator line overlays. Extends ChartBase for shared
GPU/repaint infrastructure. Data is provided as an array of
{ open, high, low, close, volume, time } objects, or as a flat
Float64Array via the dataBuffer property for zero-copy WASM integration.
Basic Candlestick Chart
Default chart with 20 synthetic OHLCV candles and volume bars.
Default (460×220)
Custom Sizing
Charts can be sized with the width and height attributes.
Wide (600×280)
Color Customization
Use up-color, down-color, grid-color, and axis-color to theme the chart.
Blue/Purple Theme
Order Overlays
Buy/sell orders can be overlaid on the chart with configurable label position (order-label-position).
Left-Aligned Labels (default)
Right-Aligned Labels
Indicator Line Overlays
Line indicators (e.g. moving averages) rendered on the same canvas via the indicators property. Each entry has a data array and a color string.
SMA-5 + SMA-10 Overlays
Order Start Index
The orderStartIndex property limits order overlay lines to a candle region, preventing false overlaps across generations.
Orders from index 0 (default)
Orders from index 10
Float64Array Fast Path (dataBuffer)
The dataBuffer property accepts a flat Float64Array with interleaved [open, high, low, close, volume, time] × N candles — zero-copy from WASM.
From Float64Array (20 candles)
Theme Toggle
Interactive Controls
Manipulate the charts above programmatically.
Usage Instructions
HTML Usage:
<ars-candlestick-chart id="chart"></ars-candlestick-chart>
Data Format:
chart.data = [{ open, high, low, close, volume, time }, ...];
Each object represents one candle. time is a Unix timestamp in milliseconds.
Order Overlays:
chart.orders = [{ side, amount, price }, ...];
side: "buy" or "sell"
amount: order size
price: price level for the dashed overlay line
Attributes:
width / height: Canvas dimensions (default 460×220)
up-color: Bullish candle color (default green)
down-color: Bearish candle color (default red)
background-color: Canvas background
grid-color / axis-color: Grid and axis styling
volume-opacity: Volume bar opacity
volume-height-ratio: Fraction of chart height for volume (default 0.25)
candle-gap: Gap between candles in pixels
price-tick-count / date-tick-count: Number of axis ticks
order-label-position: "left" or "right" for order labels
Properties (JS only):
chart.indicators = [{ data: number[], color: string }, ...];
Line overlays (e.g. moving averages) rendered on the same canvas using the price scale.
chart.orderStartIndex = 10;
Candle index from which order overlay lines begin — prevents false overlaps across generations.
chart.dataBuffer = new Float64Array([...]);
Flat interleaved [open,high,low,close,volume,time] × N buffer.
Zero-copy fast path from WASM — takes priority over data when set.