CompositeChart
CompositeChart
하나의 차트에서 Line, Area, Bar 차트를 함께 사용할 수 있는 복합(composed) 차트 컴포넌트예요. 서로 다른 타입의 시리즈를 한 차트에 조합해 표시할 때 유용해요.
출처: 문서
본문
Usage
CompositeChart는 하나의 차트에서 Line, Area, Bar 차트를 함께 사용할 수 있게 해줘요.
import { CompositeChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<CompositeChart
h={300}
data={data}
dataKey="date"
maxBarWidth={30}
series={[
{ name: 'Tomatoes', color: 'rgba(18, 120, 255, 0.2)', type: 'bar' },
{ name: 'Apples', color: 'red.8', type: 'line' },
{ name: 'Oranges', color: 'yellow.8', type: 'area' },
]}
/>
);
}
Legend
차트 범례를 표시하려면 withLegend prop을 설정하세요. 범례 항목을 호버하면 해당 시리즈가 차트에서 강조돼요.
Legend position
legendProps prop으로 recharts Legend 컴포넌트에 props를 전달할 수 있어요. 예를 들어 legendProps={{ verticalAlign: 'bottom', height: 50 }}은 범례를 하단에 두고 높이를 50px로 설정해요.
Series labels
기본적으로 시리즈 name이 라벨로 사용돼요. series 객체의 label 속성으로 바꿀 수 있어요.
Points labels
데이터 포인트에 라벨을 표시하려면 withPointLabels를 설정하세요. 이 기능은 Line과 Area 차트에서만 지원돼요.
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로 오른쪽 Y축 라벨을 지정할 수 있어요. series 객체의 yAxisId를 설정해 시리즈를 오른쪽 Y축에 바인딩해야 해요.
Rotate x-axis labels
xAxisProps.angle을 회전할 각도(도)로 설정하면 x축 라벨을 회전시킬 수 있어요.
Value formatter
툴팁과 축 눈금의 값을 형식화하려면 valueFormat prop을 사용하세요. 숫자 값을 받아 형식화된 값을 반환하는 함수예요.
Chart color
다른 컴포넌트처럼 theme에서 색을 참조할 수 있어요(blue, red.5, orange.7 등). 유효한 CSS 색상 값도 허용돼요.
Change chart 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 charts
composedChartProps prop으로 recharts ComposedChart 컴포넌트에 props를 전달할 수 있어요. 예를 들어 composedChartProps={{ syncId: 'any-id' }}는 같은 syncId를 가진 여러 CompositeChart의 툴팁을 동기화해요.
Dashed lines
series의 strokeDasharray 속성을 설정해 라인 스타일을 점선으로 바꿀 수 있어요.
Reference lines
referenceLines prop으로 기준선을 렌더링해요. 기준선은 항상 차트 뒤에 그려져요.
Reference areas
referenceAreas prop으로 사각 영역을 강조할 수 있어요. 각 영역은 x1/x2(가로), 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 { CompositeChart } from '@mantine/charts';
const data = [
{ date: 'Mar 1', Apples: 2200, Oranges: 1400, Tomatoes: 800 },
{ date: 'Mar 2', Apples: 2500, Oranges: 1500, Tomatoes: 1000 },
/* ...other data points */
];
function Demo() {
return (
<CompositeChart h={300} data={data} dataKey="date" withBrush
series={[{ name: 'Apples', color: 'indigo.6', type: 'line' }]} />
);
}