AreaChart
AreaChart
stacked, percent, split 배리언트를 지원하는 영역 차트 컴포넌트예요. @mantine/charts 패키지에서 제공하며, 여러 시리즈의 추세와 기여도를 시각화할 때 유용해요.
출처: 문서
본문
Usage
AreaChart 컴포넌트를 type prop 없이 사용하면 일반(regular) 영역 차트를 렌더링해요. 일반 영역 차트에서는 각 데이터 시리즈가 독립적으로 그려지고 다른 시리즈와 상호작용하지 않아요.
import { AreaChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<AreaChart
h={300}
data={data}
dataKey="date"
series={[
{ name: 'Apples', color: 'indigo.6' },
{ name: 'Oranges', color: 'blue.6' },
]}
/>
);
}
Stacked area chart
type="stacked"으로 설정하면 누적(stacked) 영역 차트를 렌더링해요. 이 타입의 영역 차트에서는 세로 축을 따라 누적이 적용되어 전체적인 추세와 각 시리즈가 총계에 기여하는 정도를 함께 볼 수 있어요.
Percent area chart
type="percent"로 설정하면 백분율 영역 차트를 렌더링해요. 이 타입에서는 y축 스케일이 항상 100%로 정규화되어, 각 시리즈의 기여도를 백분율로 비교하기 쉬워요.
Streamgraph
type="stream"으로 설정하면 스트림그래프(ThemeRiver라고도 함)를 렌더링해요. 스트림그래프는 기준선이 0에 고정되지 않고 중앙 축을 따라 흐르는 누적 영역 차트로, 특징적인 유기적인 "강(river)" 모양을 만들어요. 전체 흐름과 비율이 정확한 값보다 중요한 경우, 시간에 따른 총계 구성 변화를 보여줄 때 유용해요.
기준선이 유동적이기 때문에 y축 값을 읽는 것은 의미가 없어서, type="stream"에서는 y축이 기본적으로 숨겨져 있어요. 필요하다면 withYAxis를 다시 true로 설정할 수 있어요.
Split area chart
type="split"으로 설정하면 분할 영역 차트를 렌더링해요. 이 타입에서는 양수 값과 음수 값을 위한 두 가지 색으로 채움 색이 나뉘어요. 분할 영역 차트는 하나의 데이터 시리즈만 지원해요.
Split colors
splitColors prop을 두 가지 색 배열로 설정하면 분할 영역 차트의 채움 색을 커스터마이즈할 수 있어요. 첫 번째 색은 양수 값, 두 번째 색은 음수 값에 사용돼요. splitColors prop은 다른 타입의 영역 차트에서는 무시돼요.
Legend
차트 범례를 표시하려면 withLegend prop을 설정하세요. 범례의 항목 하나를 호버하면 해당 데이터 시리즈가 차트에서 강조 표시돼요.
Legend position
legendProps prop으로 recharts Legend 컴포넌트에 props를 전달할 수 있어요. 예를 들어 legendProps={{ verticalAlign: 'bottom', height: 50 }}으로 설정하면 범례를 차트 하단에 렌더링하고 높이를 50px로 설정해요.
Series labels
기본적으로 시리즈 name이 라벨로 사용돼요. series 객체의 label 속성을 설정하면 라벨을 바꿀 수 있어요.
Set curve type per line
series 배열의 각 라인에 개별 curve 타입을 설정할 수 있어요. 라인에 curve 타입을 설정하지 않으면 curveType prop을, curveType도 설정되지 않았다면 monotone을 사용해요.
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 범위에 있을 것이라면 domain을 [0, 100]으로 설정할 수 있어요.
Right Y axis
차트 오른쪽에 추가 Y축을 표시하려면 withRightYAxis prop을 설정하세요. rightYAxisProps prop으로 recharts YAxis 컴포넌트에 props를 전달하고, rightYAxisLabel prop으로 오른쪽 Y축에 라벨을 지정할 수 있어요. series 객체에서 yAxisId를 설정해 데이터 시리즈를 오른쪽 Y축에 바인딩해야 한다는 점에 주의하세요.
Rotate x-axis labels
xAxisProps.angle을 회전할 각도(도)로 설정하면 x축 라벨을 회전시킬 수 있어요.
Value formatter
툴팁과 축 눈금의 값을 형식화하려면 valueFormat prop을 사용하세요. 숫자 값을 인자로 받아 형식화된 값을 반환하는 함수를 받아요.
import { AreaChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<AreaChart
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' },
]}
/>
);
}
Area color
다른 컴포넌트에서와 같은 방식으로 theme에서 색을 참조할 수 있어요. 예를 들어 blue, red.5, orange.7 등이에요. 유효한 CSS 색상 값도 허용돼요.
Change area color depending on color scheme
color 속성에 CSS 변수를 사용할 수 있어요. 색상 스킴에 따라 달라지는 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);
}
}
애플리케이션이 하나의 색상 스킴만 가진다면 CSS 변수 대신 gridColor와 textColor prop을 사용할 수 있어요.
Tooltip animation
기본적으로 툴팁 애니메이션은 비활성화돼 있어요. tooltipAnimationDuration prop을 밀리초 단위 숫자로 설정하면 툴팁 위치 변경을 애니메이션 처리할 수 있어요.
Units
unit prop을 설정하면 y축 눈금과 툴팁 값 옆에 단위 라벨을 렌더링해요.
Custom tooltip
tooltipProps.content로 recharts Tooltip 컴포넌트에 커스텀 툴팁 렌더러를 전달할 수 있어요. 스타일링 용도로만 사용되는 빈 값을 제거하려면 getFilteredChartTooltipPayload 함수로 recharts payload를 필터링해야 해요.
Remove tooltip
withTooltip={false}로 설정하면 툴팁을 제거할 수 있어요. 이 경우 커서 라인도 함께 사라지고 차트와의 상호작용이 비활성화돼요.
Customize dots
dotProps로 일반 상태의 recharts dot에, activeDotProps로 활성 상태(커서가 현재 시리즈 위에 있을 때)의 recharts dot에 props를 전달할 수 있어요.
Stroke width
strokeWidth prop으로 모든 영역의 stroke 너비를 제어할 수 있어요.
Fill opacity
fillOpacity prop으로 모든 영역의 채움 불투명도를 제어할 수 있어요.
Sync multiple AreaCharts
areaChartProps prop으로 recharts AreaChart 컴포넌트에 props를 전달할 수 있어요. 예를 들어 areaChartProps={{ syncId: 'any-id' }}로 설정하면 같은 syncId prop을 가진 여러 AreaChart 컴포넌트의 툴팁이 동기화돼요.
Vertical orientation
orientation="vertical"로 설정하면 세로 방향 영역 차트를 렌더링해요.
Dashed area line
series의 strokeDasharray 속성을 설정해 라인 스타일을 점선으로 변경할 수 있어요.
Reference lines
referenceLines prop으로 기준선을 렌더링할 수 있어요. 기준선은 항상 차트 뒤에 렌더링돼요.
Reference areas
referenceAreas prop으로 차트의 사각 영역을 강조할 수 있어요. 각 영역은 x1/x2(가로)와 y1/y2(세로) 데이터 값으로 경계가 정해져요. 한 쌍을 생략하면 반대 축 전체로 확장돼요. 예를 들어 x1/x2만 제공하면 차트 전체 높이에 걸친 시간 범위를 강조할 수 있어요. color를 theme color나 CSS 색상으로, label을 영역 안에 표시할 텍스트로 설정하세요. 기준 영역은 차트 시리즈 뒤에 렌더링돼요.
Reference dots
referenceDots prop으로 차트의 개별 지점(피크, 이벤트, 기록값, 이상치 등)을 표시할 수 있어요. 각 dot은 x, y 데이터 좌표로 위치가 정해지고 r(반지름), color(모든 theme color 또는 CSS 색상), label을 지원해요. 기준 dot은 차트 시리즈 위에 렌더링돼요.
Brush
withBrush prop을 설정하면 차트 아래에 브러시(범위 선택기)를 표시해요. 브러시 핸들을 드래그하면 데이터의 일부로 확대/축소되어 선택한 범위만 차트에 표시돼요. 브러시 테두리와 배경은 차트 그리드에 맞춰 테마 처리되고 색상 스킴에 적응해요. withBrush는 기본값이 false이며, 가로 방향의 AreaChart, BarChart, LineChart, CompositeChart 컴포넌트에서 지원돼요.
Brush props
brushProps prop으로 내부 recharts Brush 컴포넌트에 props를 전달할 수 있어요. 예를 들어 startIndex/endIndex로 초기 선택 범위를 설정하거나, 브러시 height를 바꾸거나, onChange로 범위 변경을 구독할 수 있어요.
ChartBrush component
브러시를 완전히 제어하려면 withBrush prop 대신 ChartBrush 컴포넌트를 차트의 자식으로 렌더링하세요. ChartBrush는 모든 recharts Brush props를 받고 Mantine 테마를 적용해요. 브러시 안에 커스텀 traveller나 파노라마 미리 보기가 필요할 때 유용해요.
import { AreaChart, ChartBrush } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<AreaChart h={300} data={data} dataKey="date" series={[{ name: 'Apples', color: 'indigo.6' }]}>
<ChartBrush />
</AreaChart>
);
}