Candlestick Charts for React, Vue & Svelte

Wick Charts
OverviewMigration Guide
CandlestickLine & AreaBarPie & DonutSparkline
Candlestick
BTC/USDStandard · 1m
11:59:10O48861H49055L48774C48861V47.00K
01234567890123456789012345678901234567890123456789
47000480004900050000
11:56:0011:57:0011:58:0011:59:00
DOGE/USDHigh volatility · 1m
11:59:10O105.21H105.36L105.10C105.12V35.33K
012345678901234567890123456789.0123456789012345678901234567890123456789
100105
11:50:0011:55:00
ETH/USDTrending · 1m
11:59:10O1570.73H1573.83L1559.60C1565.34V87.60K
0123456789012345678901234567890123456789.01234567890123456789
150015501600
11:45:0011:50:0011:55:00
Demo
ModeStream mock data vs. static snapshot
Perf HUDFPS, frame time, draw calls, per-series ms, heap
Display
Value labelLast value pill on y-axis
TooltipOn hover
Info barOHLC values above the chart
CrosshairVertical + horizontal cursor lines
Series
Body widthCandle body width as a fraction of the available slot
Grid
Visible
Style
X axis
Visible
HeightReserved pixels for labels
30px
Y axis
Visible
WidthReserved pixels for labels
55px
MinFixed lower bound (or auto)
MaxFixed upper bound (or auto)
Background
GradientSoft background gradient
Header layoutHow the header interacts with the plot area
Animations
— Series —
Candle entry style
Candle entryPer-candle entrance duration. 0 disables.
250ms
Candle smoothOHLC chase duration on data updates. 0 snaps.
250ms
— X axis —
X curveSpring carries velocity across streaming ticks; Snap disables easing.
X settleStreaming retarget baseline. Cadence EMA tunes this at runtime.
200ms
X gesturePan / zoom commit easing. 0 = instant apply.
150ms
— Y axis —
Y curveHermite: fixed-duration cubic. Spring: critically-damped physics. Snap: no animation.
Y settleOutward chase to a new extreme. Faster = punchier reaction to spikes.
250ms
Y sticky minFloor of the dynamic contract — a tiny recede. Short = snappy small re-fits.
500ms
Y sticky maxCap of the dynamic contract — a full-range contraction. Larger = stickier auto-fit hold.
2500ms
Y gestureY override during gestures. Short = frame-per-tick interactive feel.
100ms
— Other —
Tick fadeCross-fade duration for axis tick labels.
250ms
Visibility toggleSeries-visibility fade plus Y re-fit duration.
250ms
import {
  CandlestickSeries,
  ChartContainer,
  Crosshair,
  InfoBar,
  XAxis,
  YAxis,
  YLabel,
  catppuccin,
} from '@wick-charts/react';
 
<ChartContainer theme={catppuccin.theme}>
  <CandlestickSeries
    id={sid}
    data={ohlcData}
    options={{ bodyWidthRatio: 0.6 }}
  />
  <InfoBar />
  <YLabel seriesId={sid} />
  <Crosshair />
  <YAxis />
  <XAxis />
</ChartContainer>