SankeyChart

Chart

Draw responsive SVG flows between nodes with keyboard focus, link titles, and hover emphasis; skip links to unknown nodes.

flow

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

import { SankeyChart } from "@reopt-ai/opt-charts";

Live preview

Change the width and theme, then interact with the components.

100%

Acquisition to purchase

Links reference stable node IDs, so display labels can change without breaking the graph. Omit width to fit the available space. The chart also exposes a table of every link to assistive technology.

SankeyChart

Prop	Type	Default	Description
nodesRequired	SankeyNode[]	—	노드 정의 ({ id, label, color? }). 색은 이 배열의 순서를 따른다
linksRequired	SankeyLink[]	—	링크 정의 ({ source, target, value })
width	number	—	고정 너비. 생략하면 컨테이너 너비를 따른다
height	number	300	차트 높이
nodePadding	number	10	노드 간 패딩
nodeWidth	number	16	노드 두께
valueFormatter	(value: number) => string	—	값을 표시 문자열로 바꾸는 함수. 기본은 locale 인식 숫자 포맷
accessibleTable	boolean	false	스크린 리더용으로 숨긴 데이터 표를 함께 렌더링
labels	SankeyChartLabels	—	지역화 문자열 (empty·summaryCaption·chartName·sourceColumn·targetColumn·valueColumn)
locale	string	—	기본 숫자 포맷에 쓰는 locale. 생략하면 런타임 locale
loading	boolean	false	새 데이터를 불러오는 동안 현재 렌더를 흐리게 유지
emptyState	React.ReactNode	—	데이터가 없을 때 보여줄 내용. 기본은 labels.empty
className	string	—	루트 요소에 붙는 CSS 클래스
aria-label	string	—	스크린 리더용 레이블. 생략하면 차트 종류와 항목 이름으로 만든다
aria-describedby	string	—	차트를 설명하는 요소의 id

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

SankeyChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

ComparisonChart

Charts

Compare categories using grouped, stacked, or mirrored chart layouts.

FunnelChart

Charts

Show stage entries, overall conversion, and drop-off between stages in a funnel.

ChartContainer

Charts

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

ChartTooltip

Charts

Style Recharts tooltips with tooltip semantics and hidden decorative markers through the content prop.

ChartLegend

Charts

Display chart legends as lists, with real buttons for interactive series toggles.

LineChart

Charts

Visualize trends and changes over time with a line chart for continuous data.

SankeyChart

Chart

Draw responsive SVG flows between nodes with keyboard focus, link titles, and hover emphasis; skip links to unknown nodes.

flow

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

import { SankeyChart } from "@reopt-ai/opt-charts";

Live preview

Change the width and theme, then interact with the components.

100%

Acquisition to purchase

Links reference stable node IDs, so display labels can change without breaking the graph. Omit width to fit the available space. The chart also exposes a table of every link to assistive technology.

SankeyChart

Prop	Type	Default	Description
nodesRequired	SankeyNode[]	—	노드 정의 ({ id, label, color? }). 색은 이 배열의 순서를 따른다
linksRequired	SankeyLink[]	—	링크 정의 ({ source, target, value })
width	number	—	고정 너비. 생략하면 컨테이너 너비를 따른다
height	number	300	차트 높이
nodePadding	number	10	노드 간 패딩
nodeWidth	number	16	노드 두께
valueFormatter	(value: number) => string	—	값을 표시 문자열로 바꾸는 함수. 기본은 locale 인식 숫자 포맷
accessibleTable	boolean	false	스크린 리더용으로 숨긴 데이터 표를 함께 렌더링
labels	SankeyChartLabels	—	지역화 문자열 (empty·summaryCaption·chartName·sourceColumn·targetColumn·valueColumn)
locale	string	—	기본 숫자 포맷에 쓰는 locale. 생략하면 런타임 locale
loading	boolean	false	새 데이터를 불러오는 동안 현재 렌더를 흐리게 유지
emptyState	React.ReactNode	—	데이터가 없을 때 보여줄 내용. 기본은 labels.empty
className	string	—	루트 요소에 붙는 CSS 클래스
aria-label	string	—	스크린 리더용 레이블. 생략하면 차트 종류와 항목 이름으로 만든다
aria-describedby	string	—	차트를 설명하는 요소의 id

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

SankeyChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.