@finchart

Appearance

Documentation / @finchart/react / ChartContainerProps

Interface: ChartContainerProps<T> ​

Defined in: components/chart-container.tsx:34

Type Parameters ​

T ​

T extends BaseDataPoint

Properties ​

ariaLabel? ​

optional ariaLabel?: string

Defined in: components/chart-container.tsx:101

aria-label — 차트가 무엇을 그리는지. 예: "AAPL 일봉, 1~6월".

children? ​

optional children?: ReactNode

Defined in: components/chart-container.tsx:104

<ChartPane>·<ChartSeries>·<XAxis>·<YAxis>

className? ​

optional className?: string

Defined in: components/chart-container.tsx:90

data ​

data: T[]

Defined in: components/chart-container.tsx:43

deps ​

deps: PlotDeps | BrowserDeps

Defined in: components/chart-container.tsx:42

완성 배선, 또는 browserDeps()가 돌려주는 레시피 — 컨테이너는 이쪽이 세우는 div로 채워진다.

필수다 — 기본값을 두면 이 패키지가 browserDeps를 정적으로 import하게 되고, lean하게 배선한 소비자까지 브라우저 셸을 싣는다(+6.5KB gzip 실측).

gridStyle? ​

optional gridStyle?: Partial<LineStyle>

Defined in: components/chart-container.tsx:51

height? ​

optional height?: number

Defined in: components/chart-container.tsx:49

id? ​

optional id?: string

Defined in: components/chart-container.tsx:98

접근성·식별의 좁은 문 넷. 캔버스는 이름도 role도 없으니 role="img" + aria-label로 차트가 무엇인지 말하고, 탭 순서에서 빼려면 tabIndex={-1} — 전부 컨테이너 요소의 속성이다. 전면 rest-spread는 안 한다: 무엇이 컨테이너로 가는지가 계약에서 흐려진다.

onCrosshair? ​

optional onCrosshair?: (crosshair) => void

Defined in: components/chart-container.tsx:54

Parameters ​

crosshair ​

CrosshairPayload

Returns ​

void

onPlot? ​

optional onPlot?: (plot) => void

Defined in: components/chart-container.tsx:89

무대를 상태로 올리는 문 — 컨테이너 사이의 배선이 이걸 요구한다. plotRef는 effect를 못 깨우므로, 무대의 등장/퇴장에 반응해야 하는 배선(<SyncX> 같은 것)은 이 콜백으로 상태를 만든다. 무대가 서면 plot으로, 내려가면 null로 부른다.

참조가 안정해야 한다 (useState의 setter나 useCallback) — 렌더마다 새 함수를 주면 매 렌더 null/plot이 오간다.

Parameters ​

plot ​

Plot | null

Returns ​

void

onStateChange? ​

optional onStateChange?: (state) => void

Defined in: components/chart-container.tsx:71

보는 상태가 바뀔 때 — URL 저장·undo·차트 동기화의 시작점.

Parameters ​

state ​

ChartState

Returns ​

void

onXDomainChange? ​

optional onXDomainChange?: (change) => void

Defined in: components/chart-container.tsx:61

보고 있는 x 구간이 바뀔 때. 무한 스크롤이 이걸 듣는다 (ADR-0009).

plotRef로 직접 구독하는 것보다 안전하다 — 무대가 리마운트돼도(key로 배선을 갈 때) 구독이 새 plot을 따라간다.

Parameters ​

change ​

XDomainChangePayload

Returns ​

void

paneGap? ​

optional paneGap?: number

Defined in: components/chart-container.tsx:53

pane 사이 간격(px). 구분자가 여기 놓인다.

plotRef? ​

optional plotRef?: PlotHandleRef

Defined in: components/chart-container.tsx:79

명령형 API가 필요할 때 — fitDomains·pan 같은 것.

이벤트 핸들러 안에서 쓰는 채널이다. 무대가 서고 지는 것에 반응해야 하면 onPlot을 쓴다 — ref는 effect를 못 깨워 key 리마운트에서 부모 effect가 낡은 값을 본다 (ADR-0033).

role? ​

optional role?: AriaRole

Defined in: components/chart-container.tsx:99

showGrid? ​

optional showGrid?: boolean

Defined in: components/chart-container.tsx:50

state? ​

optional state?: Partial<ChartState>

Defined in: components/chart-container.tsx:69

보는 상태를 밖에서 준다. 참조가 바뀔 때마다 반영된다 — usePlot.state.

pane 조각은 pane이 나중에 붙어도 자기 자리를 찾는다: 자식 pane은 두 번째 커밋에 붙는데, 컨테이너가 pane 목록이 바뀐 커밋 뒤에 조각을 다시 적용해서(<ChartPane flex>보다 늦게 돎) 복원이 마운트 기본값을 이긴다.

style? ​

optional style?: CSSProperties

Defined in: components/chart-container.tsx:91

tabIndex? ​

optional tabIndex?: number

Defined in: components/chart-container.tsx:102

width? ​

optional width?: number

Defined in: components/chart-container.tsx:48

생략하면 컨테이너가 정한다 — deps에 autoSize: true를 켜 두면 코어의 ResizeObserver가 따라간다. 주면 그쪽이 이긴다.