SankeyChart

샌키 다이어그램 컴포넌트예요. 노드 사이의 흐름을 시각화하며, 각 링크의 너비가 흐름 값에 비례해요. recharts의 Sankey를 기반으로 해요.

출처: 문서

본문

SankeyChart는 recharts의 Sankey 컴포넌트를 기반으로 해요. 각 링크의 너비가 흐름 값에 비례하는 노드 사이의 흐름을 시각화해요.

import { SankeyChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <SankeyChart data={data} />;
}

데이터의 각 노드에 color를 설정해 개별 노드 색을 제어할 수 있어요. 색은 theme 값을 참조할 수 있어요(blue, red.5, orange.7 등). 유효한 CSS 색상 값도 허용돼요.

colors prop으로 개별 노드에 color가 설정되지 않았을 때 노드에 사용할 색 배열을 제공할 수 있어요. 색은 theme 값을 참조할 수 있어요. 노드가 색보다 많으면 색이 순환해요.

nodeWidth로 각 노드의 너비를, nodePadding으로 노드 사이의 간격을 제어할 수 있어요.

linkOpacity prop으로 노드 사이 링크의 불투명도를 제어할 수 있어요.

툴팁을 비활성화하려면 withTooltip={false}로 설정하세요.