Documentation / @finchart/react / ChartContainerProps
Interface: ChartContainerProps<T>
Defined in: react/src/components/chart-container.tsx:52
Type Parameters
T
T extends BaseDataPoint
Properties
ariaLabel?
optionalariaLabel?:string
Defined in: react/src/components/chart-container.tsx:160
aria-label — what the chart draws. E.g., "AAPL daily candles, Jan–Jun".
children?
optionalchildren?:ReactNode
Defined in: react/src/components/chart-container.tsx:163
<ChartPane>·<ChartSeries>·<XAxis>·<YAxis>
className?
optionalclassName?:string
Defined in: react/src/components/chart-container.tsx:147
containerRef?
optionalcontainerRef?:ContainerHandleRef
Defined in: react/src/components/chart-container.tsx:133
The element the chart is built on — the one that takes focus and the keyboard. A toolbar button takes focus when clicked, so the keys that follow (Esc to cancel a drawing, Delete) only reach the chart once focus comes back: containerRef.current?.focus() after tools.begin(). null until mounted and after unmount; never set on the server.
data
data:
T[]
Defined in: react/src/components/chart-container.tsx:62
deps
deps:
PlotDeps|BrowserDeps
Defined in: react/src/components/chart-container.tsx:61
A finished wiring, or the recipe browserDeps() returns — the container fills the div this sets up.
Required — giving it a default would mean this package statically imports browserDeps, and even consumers who wired things leanly would carry the browser shell (+6.5KB gzip, measured).
followTheme?
optionalfollowTheme?:boolean|ThemeObserverOptions
Defined in: react/src/components/chart-container.tsx:94
Redraw when the theme moves — prefers-color-scheme, or a class / data-theme / style change on the container or an ancestor it had at mount; an attributes list replaces that default. Off by default: a fixed palette should not hold a MutationObserver it never needs. A theme applied by restructuring the DOM above the chart, or a swapped stylesheet, is out of reach — call plot.requestRender() yourself then.
gridStyle?
optionalgridStyle?:Partial<LineStyle>
Defined in: react/src/components/chart-container.tsx:71
height?
optionalheight?:number
Defined in: react/src/components/chart-container.tsx:69
id?
optionalid?:string
Defined in: react/src/components/chart-container.tsx:157
Four narrow doors for accessibility and identification. A canvas has no name and no role, so say what the chart is with role="img" + aria-label, and pull it out of the tab order with tabIndex={-1} — all four are props of the container element. There's no blanket rest-spread: that would blur which props go to the container as part of the contract.
onCrosshair?
optionalonCrosshair?: (crosshair) =>void
Defined in: react/src/components/chart-container.tsx:95
Parameters
crosshair
CrosshairPayload | null
Returns
void
onError?
optionalonError?: (error) =>void
Defined in: react/src/components/chart-container.tsx:115
Data the chart refused — out of order, not finite — reported instead of thrown. The chart keeps drawing the data it had (a sync is checked whole before any of it applies), and the next good data lands as usual, so a live screen survives one bad tick. Only DataError: a ContractError is a mistake in the code and still goes to the nearest error boundary.
Left out, refused data throws to the nearest error boundary — the default never hides a bug.
Parameters
error
DataError
Returns
void
onPlot?
optionalonPlot?: (plot) =>void
Defined in: react/src/components/chart-container.tsx:146
The door for lifting the chart into state — wiring between containers requires this. Since plotRef can't wake an effect, wiring that has to react to the chart appearing and disappearing (something like <SyncX>) builds its state through this callback instead. Called with the plot once the chart is up, and with null once it's torn down.
The reference must be stable (a useState setter or useCallback) — give it a new function every render and null/the plot swap back and forth on every render.
Parameters
plot
Plot | null
Returns
void
onXDomainChange?
optionalonXDomainChange?: (change) =>void
Defined in: react/src/components/chart-container.tsx:104
Fires when the visible x range changes. Infinite scroll listens for this.
Safer than subscribing directly through plotRef — even if the chart remounts (swapping the wiring via key), the subscription follows the new plot.
Parameters
change
XDomainChangePayload
Returns
void
options?
optionaloptions?:PlotOptions
Defined in: react/src/components/chart-container.tsx:85
The plot options that have no prop of their own — padding, resizablePanes, shiftVisibleRangeOnNewBar, preserveLiveRightEdgeOnZoomOut, axisDrag, rightOffset, minBarSpacing, maxBarSpacing. A key that is missing reverts to what the plot was built with; minBarSpacing/maxBarSpacing go back to the x mapping's own default. Applied before the first series registers, so rightOffset shapes the first fit whatever the JSX order. axis is <XAxis>/<YAxis>'s, style.grid is gridStyle, showGrid and paneGap are props — one door per value.
paneGap?
optionalpaneGap?:number
Defined in: react/src/components/chart-container.tsx:73
Gap between panes (px). The divider sits here.
plotRef?
optionalplotRef?:PlotHandleRef
Defined in: react/src/components/chart-container.tsx:125
For when you need the imperative API — things like fitDomains or pan.
A channel meant for use inside event handlers. Use onPlot when you need to react to the chart appearing and disappearing — a ref can't wake an effect, so under a key remount, the parent's effect sees a stale value.
role?
optionalrole?:AriaRole
Defined in: react/src/components/chart-container.tsx:158
showGrid?
optionalshowGrid?:boolean
Defined in: react/src/components/chart-container.tsx:70
style?
optionalstyle?:CSSProperties
Defined in: react/src/components/chart-container.tsx:148
tabIndex?
optionaltabIndex?:number
Defined in: react/src/components/chart-container.tsx:161
width?
optionalwidth?:number
Defined in: react/src/components/chart-container.tsx:68
Falls back to the container deciding when omitted — turn on autoSize: true in deps and the core's ResizeObserver follows along. Given explicitly, that wins instead.