BarChart
BarChart
stacked, percent 배리언트를 지원하는 막대 차트 컴포넌트예요. @mantine/charts에서 제공하며, 카테고리별 값을 비교할 때 사용해요.
출처: 문서
본문
Usage
BarChart 컴포넌트를 type prop 없이 사용하면 일반(regular) 막대 차트를 렌더링해요. 일반 막대 차트에서는 각 데이터 시리즈가 독립적으로 그려지고 다른 시리즈와 상호작용하지 않아요.
import { BarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<BarChart h={300} data={data} dataKey="month" series={[
{ name: 'Smartphones', color: 'violet.6' },
{ name: 'Laptops', color: 'blue.6' },
]} />
);
}
Stacked bar chart
type="stacked"으로 설정하면 누적 막대 차트를 렌더링해요. 세로 축을 따라 누적이 적용되어 전체 추세와 각 시리즈의 기여도를 함께 볼 수 있어요.
Mixed stacked bar chart
series 객체의 stackId 속성을 설정해 시리즈가 어떻게 쌓이는지 제어할 수 있어요.
Percent bar chart
type="percent"로 설정하면 백분율 막대 차트를 렌더링해요. y축 스케일이 항상 100%로 정규화되어 각 시리즈의 기여도를 백분율로 비교하기 쉬워요.
Waterfall bar chart
type="waterfall"로 설정하면 폭포(waterfall) 막대 차트를 렌더링해요. 이 차트 타입은 초기 값이 이후의 양수/음수 값으로 어떻게 변화하는지를 보여주며, 각 막대는 이전 막대가 끝난 지점에서 시작해요. 데이터 안의 color prop으로 각 막대를 개별적으로 색칠할 수 있어요(이 특정 막대의 시리즈 색은 덮어써져요). 데이터 안의 standalone prop으로 막대를 흐름에서 분리할 수 있어요.
SVG pattern as bar fill
SVG 패턴을 막대 채움으로 사용할 수 있어요. series 객체의 fill 속성을 차트 children의 defs 섹션에 정의된 SVG 패턴의 URL로 설정하세요.
대각선 줄무늬와 십자형 패턴을 막대 채움으로 사용하는 예시예요.
Bar color based on value
getBarColor prop으로 값에 따라 색을 지정할 수 있어요. getBarColor 함수는 값(value)과 시리즈 객체 두 인자로 호출되며, 색 문자열(theme color 참조 또는 유효한 CSS 색상 값)을 반환해야 해요.
getBarColor가 반환한 색은 범례와 툴팁의 색에는 영향을 주지 않아요.
import { BarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<BarChart
h={300}
data={data}
dataKey="month"
getBarColor={(value) => (value > 700 ? 'teal.8' : 'red.8')}
series={[{ name: 'Laptops', color: 'gray.6' }]}
/>
);
}
Legend
차트 범례를 표시하려면 withLegend prop을 설정하세요. 범례 항목을 호버하면 해당 시리즈가 차트에서 강조돼요.
Legend position
legendProps prop으로 recharts Legend 컴포넌트에 props를 전달할 수 있어요. 예를 들어 legendProps={{ verticalAlign: 'bottom', height: 50 }}은 범례를 하단에 두고 높이를 50px로 설정해요.
Series labels
기본적으로 시리즈 name이 라벨로 사용돼요. series 객체의 label 속성으로 바꿀 수 있어요.
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~150 범위라면 [0, 150]으로 설정할 수 있어요.
Value formatter
툴팁과 축 눈금의 값을 형식화하려면 valueFormat prop을 사용하세요. 숫자 값을 받아 형식화된 값을 반환하는 함수예요.
import { BarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<BarChart
h={300}
data={data}
dataKey="month"
valueFormatter={(value) => new Intl.NumberFormat('en-US').format(value)}
series={[
{ name: 'Smartphones', color: 'violet.6' },
{ name: 'Laptops', color: 'blue.6' },
{ name: 'Tablets', color: 'teal.6' },
]}
/>
);
}
Area color
다른 컴포넌트와 같은 방식으로 theme에서 색을 참조할 수 있어요(blue, red.5, orange.7 등). 유효한 CSS 색상 값도 허용돼요.
Bar props
barProps prop으로 recharts Bar 컴포넌트에 props를 전달할 수 있어요. barProps는 props 객체 또는 시리즈 데이터를 인자로 받아 props 객체를 반환하는 함수를 받아요.
Minimum bar size
minBarSize prop으로 막대의 최소 크기(px)를 설정할 수 있어요.
Change bar 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);
}
}
단일 색상 스킴 앱이라면 gridColor, textColor prop을 쓸 수 있어요.
Tooltip animation
기본적으로 툴팁 애니메이션은 비활성화돼요. tooltipAnimationDuration prop을 밀리초 숫자로 설정하면 툴팁 위치 변경을 애니메이션 처리해요.
Units
unit prop으로 y축 눈금과 툴팁 값 옆에 단위 라벨을 렌더링할 수 있어요.
Custom tooltip
tooltipProps.content로 recharts Tooltip 컴포넌트에 커스텀 툴팁 렌더러를 전달할 수 있어요. 스타일링 전용 빈 값을 제거하려면 getFilteredChartTooltipPayload 함수로 payload를 필터링해야 해요.
Remove tooltip
withTooltip={false}로 툴팁을 제거해요. 커서 라인도 함께 사라지고 상호작용이 비활성화돼요.
Sync multiple BarCharts
barChartProps prop으로 recharts BarChart 컴포넌트에 props를 전달할 수 있어요. 예를 들어 barChartProps={{ syncId: 'any-id' }}는 같은 syncId를 가진 여러 BarChart의 툴팁을 동기화해요.
Vertical orientation
orientation="vertical"로 세로 방향 막대 차트를 렌더링할 수 있어요.
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을 지원해요. 막대 위에 렌더링돼요.
Bar value label
각 막대 위에 값을 표시하려면 withBarValueLabel을 설정하세요.
import { BarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<BarChart
h={300}
data={data}
dataKey="month"
valueFormatter={(value) => new Intl.NumberFormat('en-US').format(value)}
withBarValueLabel
series={[
{ name: 'Smartphones', color: 'violet.6' },
{ name: 'Laptops', color: 'blue.6' },
{ name: 'Tablets', color: 'teal.6' },
]}
/>
);
}
Bar value label props
valueLabelProps prop으로 recharts LabelList 컴포넌트에 props를 전달할 수 있어요. valueLabelProps는 props 객체 또는 시리즈 데이터를 받아 props 객체를 반환하는 함수를 받아요.
valueLabelProps={{ position: 'inside', fill: 'white', fontSize: 8 }}
Bar overlays
barProps와 classNames를 조합해 막대 위에 오버레이(예: 다른 막대 겹치기)를 만들 수 있어요. barProps에 함수를 넘겨 막대별 barSize를 다르게 설정할 수 있어요.
import { BarChart } from '@mantine/charts';
import classes from './Demo.module.css';
import { data } from './data';
function Demo() {
const bigBarWidth = useMediaQuery('(min-width: 48em)') ? 42 : 26;
const ratio = 0.5;
const smallBarWidth = bigBarWidth * ratio;
const barGap = (bigBarWidth + smallBarWidth) / -2;
return (
<BarChart
h={300}
data={data}
dataKey="month"
barProps={({ barSize: data.name === 'you' ? bigBarWidth : smallBarWidth })}
classNames={classes}
series={[
{ name: 'you', color: 'var(--you-bar-color)' },
{ name: 'average', color: 'var(--average-bar-color)' },
]}
/>
);
}
Brush
withBrush prop을 설정하면 차트 아래에 브러시(범위 선택기)를 표시해요. 브러시 핸들을 드래그해 데이터 일부로 확대/축소할 수 있어요. brushProps prop으로 내부 recharts Brush 컴포넌트에 props를 전달하거나, 완전한 제어를 위해 ChartBrush 컴포넌트를 자식으로 렌더링할 수 있어요.
import { BarChart } from '@mantine/charts';
const data = [
{ month: 'Jan', Smartphones: 1200, Laptops: 900 },
{ month: 'Feb', Smartphones: 1400, Laptops: 1000 },
/* ...other data points */
];
function Demo() {
return (
<BarChart h={300} data={data} dataKey="month" withBrush series={[
{ name: 'Smartphones', color: 'violet.6' },
{ name: 'Laptops', color: 'blue.6' },
]} />
);
}