Bar Charts for React, Vue & Svelte

Wick Charts
OverviewMigration Guide
CandlestickLine & AreaBarPie & DonutSparkline
Realtime DataMulti-chart SyncTheme editor
Bar
SingleUp/Down
14:50:3032.3900
-20020406080
14:44:0014:45:0014:46:0014:47:0014:48:0014:49:0014:50:00
Stacked4 layers
14:50:30101.0051.000034.000022.0000
050100150200250
14:44:0014:45:0014:46:0014:47:0014:48:0014:49:0014:50:00
Series 1
Series 2
Series 3
Series 4
Demo
ModeStream mock data vs. static snapshot
Perf HUDFPS, frame time, draw calls, per-series ms, heap
Display
TooltipOn hover
Info barSeries values above the chart
CrosshairVertical + horizontal cursor lines
Series
Width
Stack
Legend
Position
On click
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 —
Bar entry style
Bar entryPer-bar entrance duration. 0 disables.
250ms
Bar smoothValue 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 {
  BarSeries,
  ChartContainer,
  Crosshair,
  InfoBar,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
  catppuccin,
} from '@wick-charts/react';
 
<ChartContainer theme={catppuccin.theme}>
  <BarSeries
    data={layers}
    options={{ barWidthRatio: 0.6, stacking: 'normal' }}
  />
  <InfoBar />
  <Tooltip />
  <Crosshair />
  <YAxis />
  <XAxis />
  <Legend />
</ChartContainer>