Line & Area Charts for React, Vue & Svelte

Wick Charts
OverviewMigration Guide
CandlestickLine & AreaBarPie & DonutSparkline
Line & Area
Singlearea
11:59:1544.1000
050100
11:45:0011:50:0011:55:00
Series
Overlapping6 series
11:59:15233.04147.46113.9655.320044.10005.0000
0100200300400
11:45:0011:50:0011:55:00
Series 1
Series 2
Series 3
Series 4
Series 5
Series 6
Demo
ModeStream mock data vs. static snapshot
DataMock generator used by the live preview
Perf HUDFPS, frame time, draw calls, per-series ms, heap
Display
TooltipOn hover
Info barSeries values above the chart
CrosshairVertical + horizontal cursor lines
Area gradientBelow the line
Series
Stack
Stroke width
1px
Tooltip
Sort
Custom renderTop 3 rows via slot / render-prop
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 —
Line entry style
Line entryPer-point entrance duration. 0 disables.
250ms
Line smoothLast-value chase time-constant. 0 snaps.
250ms
Line pulseHalo cycle period at the line tail. 0 disables.
600ms
— 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 {
  ChartContainer,
  Crosshair,
  InfoBar,
  Legend,
  LineSeries,
  Tooltip,
  XAxis,
  YAxis,
  catppuccin,
} from '@wick-charts/react';
 
<ChartContainer theme={catppuccin.theme}>
  <LineSeries
    data={data}
    options={{ pulse: true, area: { visible: true } }}
  />
  <InfoBar sort="desc" />
  <Tooltip sort="desc" />
  <Crosshair />
  <YAxis />
  <XAxis />
  <Legend />
</ChartContainer>