Getting started
Getting started
@mantine/charts 패키지 사용을 시작하는 방법을 안내해요. 설치 후 앱 루트에서 차트 스타일을 import해야 해요.
출처: 문서
본문
설치 후 스타일 import
설치 후 앱 루트에서 패키지 스타일을 import하세요.
import '@mantine/core/styles.css';
// ‼️ import charts styles after core package styles
import '@mantine/charts/styles.css';
Do not forget to import styles
위의 설치 지침을 따랐는데 뭔가 동작하지 않는다면(툴팁 위치가 어긋나거나 색이 안 나오는 등) 차트 스타일을 import하지 않은 함정에 빠진 거예요. 문제를 해결하려면 앱 루트에서 차트 스타일을 import하세요.
import '@mantine/charts/styles.css';
Based on recharts
@mantine/charts 패키지의 대부분 컴포넌트는 recharts 라이브러리를 기반으로 해요. @mantine/charts 문서에 없는 고급 기능이 필요하다면 recharts 문서를 참고하세요.
Keyboard navigation
모든 @mantine/charts 컴포넌트에는 키보드로 차트를 탐색할 수 있는 접근성 레이어가 포함돼요. 차트 표면은 포커스 가능하며, 포커스를 받으면(예: Tab 키) 화살표 키가 활성 툴팁을 포인트 단위로 이동시켜 마우스를 쓰지 않는 사용자도 기본 값을 읽을 수 있어요. 이 기능은 모든 recharts 기반 차트에서 기본적으로 활성화돼요.
다음 키보드 상호작용이 지원돼요.
| Key | Description |
|---|---|
| ArrowRight | 활성 포인트를 다음 데이터 포인트로 이동 |
| ArrowLeft | 활성 포인트를 이전 데이터 포인트로 이동 |
| Enter | 활성 포인트 툴팁 켜기/끄기 |
키보드로 차트 표면에 포커스가 오면 Mantine 포커스 링이 표시되어 포커스된 차트가 명확히 보여요.
accessibilityLayer prop
접근성 레이어는 accessibilityLayer prop으로 제어되며 모든 차트에서 기본값이 true예요. 키보드 탐색을 끄려면 false로 설정하세요. 예를 들어 차트가 이미 키보드 상호작용을 처리하는 다른 위젯 안에 임베드된 경우가 그래요.
import { AreaChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return <AreaChart h={300} data={data} dataKey="date" accessibilityLayer={false} />;
}
accessibilityLayer prop은 AreaChart, BarChart, LineChart, CompositeChart, ScatterChart, BubbleChart, PieChart, DonutChart, RadarChart, RadialBarChart, FunnelChart 컴포넌트에서 지원돼요.