SankeyChart
visualDraw responsive SVG flows between nodes with keyboard focus, link titles, and hover emphasis; skip links to unknown nodes.
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.
테스트 커버리지
2026년 7월 9일생성된 테스트 결과를 찾지 못했습니다.
SankeyChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.
SankeyChart Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
nodes* | SankeyNode[] | — | 노드 정의 ({ id, label, color? }). 색은 이 배열의 순서를 따른다 |
links* | 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 |
Import
tsx
import { SankeyChart } from "@reopt-ai/opt-ui";