LineChart
LineChart
선 차트 컴포넌트예요. 시간의 흐름에 따른 데이터 추세를 시각화할 때 사용해요.
출처: 문서
본문
Usage
import { LineChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<LineChart
h={300}
data={data}
dataKey="date"
series={[
{ name: 'Apples', color: 'indigo.6' },
{ name: 'Oranges', color: 'blue.6' },
]}
/>
);
}
Gradient type
type="gradient"으로 설정하면 그라디언트 채움이 있는 선 차트를 렌더링해요. gradientStops prop으로 그라디언트 색을 커스터마이즈할 수 있어요. offset과 color 속성을 가진 객체 배열을 받아요. offset은 그라디언트에서 색의 위치를 정의하는 0~100 사이의 숫자이고, color는 theme.colors 참조 또는 유효한 CSS 색상이에요.
import { LineChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<LineChart
h={300}
data={data}
dataKey="date"
type="gradient"
valueFormatter={(value) => `${value}°C`}
series={[{ name: 'Temperature', color: 'url(#gradient)' }]}
/>
);
}
Legend
차트 범례를 표시하려면 withLegend prop을 설정하세요. 범례 항목을 호버하면 해당 시리즈가 강조돼요.
Legend position
legendProps prop으로 recharts Legend 컴포넌트에 props를 전달할 수 있어요. 예를 들어 legendProps={{ verticalAlign: 'bottom', height: 50 }}은 범례를 하단에 두고 높이를 50px로 설정해요.
Series labels
기본적으로 시리즈 name이 라벨로 사용돼요. series 객체의 label 속성으로 바꿀 수 있어요.
Connect nulls
connectNulls prop으로 null 지점을 가로질러 데이터 포인트를 연결할지 지정할 수 있어요. 기본값은 true예요.
Points labels
데이터 포인트에 라벨을 표시하려면 withPointLabels를 설정하세요.
X and Y axis props
xAxisProps, yAxisProps로 recharts XAxis/YAxis 컴포넌트에 props를 전달할 수 있어요.
Axis labels
xAxisLabel, yAxisLabel prop으로 축 라벨을 표시할 수 있어요.
X axis offset
xAxisProps로 차트 끝과 x축 사이의 패딩을 설정할 수 있어요.
Y axis scale
yAxisProps로 Y축 domain을 변경할 수 있어요. 예를 들어 데이터가 0~100이라면 [0, 100]으로 설정할 수 있어요.
Right Y axis
차트 오른쪽에 추가 Y축을 표시하려면 withRightYAxis prop을 설정하세요. rightYAxisProps로 recharts YAxis에 props를, rightYAxisLabel로 라벨을 지정할 수 있어요. series 객체의 yAxisId를 설정해 시리즈를 오른쪽 Y축에 바인딩해야 해요.
Value formatter
툴팁과 축 눈금의 값을 형식화하려면 valueFormat prop을 사용하세요. 숫자 값을 받아 형식화된 값을 반환하는 함수예요.
import { LineChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<LineChart
h={300}
data={data}
dataKey="date"
valueFormatter={(value) => new Intl.NumberFormat('en-US').format(value)}
series={[
{ name: 'Apples', color: 'indigo.6' },
{ name: 'Oranges', color: 'blue.6' },
{ name: 'Tomatoes', color: 'teal.6' },
]}
/>
);
}
Set curve type per line
series 배열의 각 라인에 개별 curve 타입을 설정할 수 있어요. 설정하지 않으면 curveType prop을, 그것도 없으면 monotone을 사용해요.
Line color
다른 컴포넌트처럼 theme에서 색을 참조할 수 있어요(blue, red.5, orange.7 등). 유효한 CSS 색상 값도 허용돼요.
Change line color depending on color scheme
color 속성에 CSS 변수를 사용할 수 있어요. 색상 스킴에 따라 달라지는 변수를 정의하려면 light/dark mixins 또는 light-dark function을 사용하세요.
Stroke dash array
strokeDasharray prop으로 그리드와 커서 라인의 stroke dash array를 제어할 수 있어요. 값은 교차하는 점선/간격의 길이를 나타내요. 예를 들어 strokeDasharray="10 5"는 10px 점선/5px 간격을 렌더링해요.
Grid and text colors
--chart-grid-color, --chart-text-color로 그리드 라인과 텍스트 색을 바꿀 수 있어요. CSS modules로 색상 스킴에 따라 색을 바꿀 수 있어요.
.root {
@mixin light {
--chart-grid-color: alpha(var(--mantine-color-black), 0.15);
--chart-text-color: var(--mantine-color-gray-7);
}
@mixin dark {
--chart-grid-color: alpha(var(--mantine-color-white), 0.15);
--chart-text-color: var(--mantine-color-dark-0);
}
}
단일 색상 스킴이면 gridColor, textColor prop을 쓸 수 있어요.
Tooltip animation
기본적으로 툴팁 애니메이션은 비활성화돼요. tooltipAnimationDuration prop을 밀리초 숫자로 설정하면 툴팁 위치 변경을 애니메이션 처리해요.
Units
unit prop으로 y축 눈금과 툴팁 값 옆에 단위 라벨을 렌더링할 수 있어요.
Custom tooltip
tooltipProps.content로 recharts Tooltip 컴포넌트에 커스텀 툴팁 렌더러를 전달할 수 있어요. 스타일링 전용 빈 값을 제거하려면 getFilteredChartTooltipPayload 함수로 payload를 필터링해야 해요.
Remove tooltip
withTooltip={false}로 툴팁을 제거해요. 커서 라인도 함께 사라지고 상호작용이 비활성화돼요.
Customize dots
dotProps로 일반 상태, activeDotProps로 활성 상태의 recharts dot에 props를 전달할 수 있어요.
Stroke width
strokeWidth prop으로 모든 라인의 stroke 너비를 제어할 수 있어요.
Sync multiple LineCharts
lineChartProps prop으로 recharts LineChart 컴포넌트에 props를 전달할 수 있어요. 예를 들어 lineChartProps={{ syncId: 'any-id' }}는 같은 syncId를 가진 여러 LineChart의 툴팁을 동기화해요.
Vertical orientation
orientation="vertical"로 세로 방향 선 차트를 렌더링할 수 있어요.
Dashed line
series의 strokeDasharray 속성을 설정해 라인 스타일을 점선으로 바꿀 수 있어요.
Reference lines
referenceLines prop으로 기준선을 렌더링해요. 기준선은 항상 차트 뒤에 그려져요.
Reference areas
referenceAreas prop으로 사각 영역을 강조할 수 있어요. 각 영역은 x1/x2(가로), y1/y2(세로) 값으로 경계가 정해져요. 한 쌍을 생략하면 반대 축 전체로 확장돼요. 예를 들어 y1/y2만 제공하면 차트 전체 너비에 걸친 목표 범위를 강조할 수 있어요. color를 theme color나 CSS 색상으로, label을 영역 안 텍스트로 설정하세요. 기준 영역은 차트 시리즈 뒤에 렌더링돼요.
Reference dots
referenceDots prop으로 개별 지점(피크, 이벤트, 기록값, 이상치)을 표시할 수 있어요. 각 dot은 x, y 좌표로 위치가 정해지고 r(반지름), color, label을 지원해요. 시리즈 위에 렌더링돼요.
Brush
withBrush prop을 설정하면 차트 아래에 브러시(범위 선택기)를 표시해요. brushProps prop으로 내부 recharts Brush 컴포넌트에 props를 전달하거나, 완전한 제어를 위해 ChartBrush 컴포넌트를 자식으로 렌더링할 수 있어요.
import { LineChart } from '@mantine/charts';
const data = [
{ date: 'Mar 1', Apples: 2200, Oranges: 1400 },
{ date: 'Mar 2', Apples: 2500, Oranges: 1500 },
/* ...other data points */
];
function Demo() {
return (
<LineChart h={300} data={data} dataKey="date" withBrush
series={[{ name: 'Apples', color: 'indigo.6' }]} />
);
}