import { ChartContainer } from '@wick-charts/react'; <ChartContainer theme={catppuccin.theme}> <LineSeries data={data} /></ChartContainer>Top-level React wrapper that creates a ChartInstance and provides it to children via context. Owns the DOM container and canvas lifecycle; renders children as an overlay layer.
Detects <Title>, <InfoBar>, and <Legend> children and positions them as:
block, so the canvas (and therefore the grid) fills the full container height. The stacked height is measured and fed back into chart.setPadding({ top }) so series data stays below them.
reserved by browser layout.
The root component every chart starts with. Provides theme, axis configuration, padding, and the canvas; collects series and overlays from its children. Use viewport={{ maxVisibleBars, initialRange }} to size the streaming window and apply an initial zoom *before* the first paint (same shape as the imperative chart.setVisibleRange).
Series components and UI overlays (Tooltip, TimeAxis, etc.) rendered inside the chart.
Visual theme. Changing this at runtime will update all themed elements.
Grouped axis configuration (Y/X visibility, bounds, sizing).
Viewport padding around the plot area. Applied on mount only — changing this prop after mount is ignored. Set every side to 0 for an edge-to-edge sparkline.
Viewport-level streaming behavior. Captured at mount only — changing this prop after the chart is created is ignored.
Show the chart background gradient. Defaults to true.
Enable zoom, pan, and crosshair interactions. Defaults to true.
Background grid configuration. Default: { visible: true }.
How <Title> and <InfoBar> are positioned relative to the canvas.
and Y-axis labels render full-height behind the header strip.
shifted down by the measured header height, so nothing renders behind the title. The chart background still spans the full container.
Animation control. true / omitted uses built-in defaults; false disables every category. Per-series options on <LineSeries> / <CandlestickSeries> / <BarSeries> override these chart-level defaults unless the category here is explicitly false.
Init-only by reference identity. A new animations object recreates the underlying ChartInstance (and its canvas). Wrap the value in useMemo(() => ({...}), [deps]) so an unstable parent render doesn't tear down the chart every commit. In dev mode the container emits a console warning when it detects >3 recreates / s.
Enable runtime performance instrumentation. Off by default.
Only read at mount; changing this prop after the chart is created is ignored.
Fired after the user releases a pan/zoom gesture that pulled the viewport past a data edge by more than ~10% of the visible range. Hosts typically respond by prefetching more history.
For threshold-based prefetch (load *before* the user fully overshoots), use <EdgeLoader> instead — that component subscribes to viewportChange and arms when the visible range nears the data edge.
Captured at mount only; changing the prop identity later is ignored.
Inline style for the chart's outer wrapper element.
Extra class for the chart's outer wrapper element.
// <ChartContainer> accepts arbitrary children.