BarChart

category 사이의 길이를 비교합니다. 얼마나를 말하는 마크이며, category의 순서를 바꿔도 잃을 것이 없는 데이터에 씁니다.

tsx

import { BarChart } from 'neba';

<BarChart
  label="팀별 배포 횟수"
  categories={['Platform', 'Payments', 'Growth']}
  series={[{ name: 'Deploys', data: [318, 264, 197] }]}
  valueLabels="all"
/>;

데이터 형식은 모든 차트가 공유합니다. series와 categories, 그리고 0이 아니라 결측을 뜻하는 null입니다. 전체 정의는 LineChart 문서에 있습니다.

막대의 길이가 곧 값이므로, 값 축은 0에서 시작하며 그것은 협상 대상이 아닙니다. 축을 자르는 순간 두 배 긴 막대가 두 배를 뜻하지 않게 되기 때문입니다. category에 자연스러운 순서가 있고 변화의 모양이 핵심이라면 LineChart가 더 나은 마크입니다.

Props

Prop	타입	기본값	설명
series *	NebaChartSeries[]	—	그릴 series. 색은 이 배열에서의 자리로 정해지므로, 범례에서 하나를 숨겨도 나머지 색은 그대로입니다
categories	(string \| number \| Date)[]	—	category 축의 위치 이름. 대신 각 점이 x를 직접 들고 있어도 됩니다
xAxis	NebaChartAxis	—	category 축
yAxis	NebaChartAxis	—	값 축
orientation공통	'horizontal' \| 'vertical'	'vertical'	막대가 자라는 방향. category 이름이 단어라면 horizontal이 정답입니다. 세로 차트는 이름에 막대 하나만큼의 너비를 줍니다
stacked	boolean \| 'full'	false	묶인 막대는 "어느 series가 더 큰가"에, 쌓인 막대는 "이 합계가 무엇으로 되어 있나"에 답합니다. full은 비중을 묻습니다
rounded	boolean	true	막대의 값 쪽 끝만 둥글게 깎습니다. 기준선 쪽은 각진 채로, 둥근 발은 축을 물결치게 만듭니다
barSize	number	size (md는 24px)	막대 두께의 상한(px). 상한 아래에서는 밴드의 자기 몫을 채우고, 넘으면 남은 자리는 여백이 됩니다
valueLabels	'none' \| 'last' \| 'extremes' \| 'all'	'none'	막대 위에 쓸 값. 숫자가 붙은 막대 여덟 개는 차트이면서 표지만, 열두 개를 넘으면 둘 다 아니게 됩니다
variant공통	'solid' \| 'outline' \| 'text'	'text'	표면의 무게. 차트는 시트가 아니라 그림이므로 기본값이 text입니다. Card 안에 넣으면 가장자리가 겹치지 않습니다. 혼자 서는 차트에는 outline을 주세요
size공통	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'	축 글자·선 두께·마커 크기, 그리고 height를 주지 않았을 때의 높이
color공통	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'primary'	시트의 색 계열. series의 색은 여기서 오지 않습니다. 팔레트나 series.color가 정합니다
density공통	'default' \| 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 \| 1 \| 2 \| 3	0	그림자 깊이. 0은 그림자 없음
height	number \| string	size	그림의 높이. 축 라벨도 이 높이 안에 그려집니다
label	string	locale's word	차트의 접근 가능한 이름. 그림 대신 읽히고, 아래에 숨겨진 데이터 표의 caption이 됩니다. 없으면 locale의 일반 명사가 쓰이지만, 무엇에 대한 차트인지는 여기서만 말할 수 있습니다
format	Intl.NumberFormatOptions	—	숫자가 나타나는 모든 곳의 표기, 축·tooltip·값 라벨·표. 없으면 만 이상은 축약됩니다(12.4K)
locale	string	—	차트가 스스로 쓰는 말과 날짜의 언어
legend	boolean \| NebaChartLegend	series ≥ 2	series가 둘 이상이면 자동으로 나오고 하나면 나오지 않습니다. 색 하나짜리 범례는 제목을 반복할 뿐입니다
tooltip	boolean \| NebaChartTooltip	true	포인터가 무엇을 드러낼지. tooltip에만 있는 값은 없습니다. 모든 값이 숨겨진 표에도 있습니다
empty	ReactNode	—	그릴 것이 없을 때 대신 그릴 내용

<div>의 native 속성과 Box의 모든 prop이 그대로 전달됩니다. xAxis·yAxis·legend·tooltip은 LineChart와 같은 형태를 받습니다. 공용 축은 prop 규약을 참고하세요.

예시

orientation

category 이름이 단어라면 horizontal이 정답입니다. 세로 차트는 이름 하나에 막대 하나만큼의 너비를 주지만, 가로 차트는 한 열을 통째로 주고 읽는 순서도 목록과 같아집니다.

stacked

묶인 막대는 "여기서 어느 series가 더 큰가"에 답하고, 쌓인 막대는 "이 합계가 무엇으로 이루어져 있는가"에 답합니다. 'full'은 모든 막대를 같은 길이로 정규화해 비중을 묻습니다. 값 축이 백분율이 되고 tooltip에는 원래 숫자가 남습니다.

서로 다른 질문이며, 하나의 차트에는 하나만 물어야 합니다.

음수 값

반대 방향으로 자라는 막대도 다른 막대와 같은 0에서 시작합니다. 기준선은 plot의 바닥이 아니라 0이 있는 자리에 그려집니다.

점의 color는 그 막대 하나만 series 색을 덮어씁니다. series를 하나 더 쓰지 않고 특정 값을 표시하는 방법입니다.

valueLabels · rounded · barSize

valueLabels="all"은 LineChart와 달리 BarChart에서는 충분히 쓸 만합니다. 숫자가 붙은 막대 여덟 개는 차트이면서 동시에 표입니다. 열두 개를 넘어가면 둘 다 아니게 되고, 그때는 series의 최고·최저만 표시하는 extremes가 답입니다.

rounded는 막대의 값 쪽 끝만 둥글게 깎습니다. 기준선 쪽은 각진 채로 둡니다. barSize는 두께의 상한을 픽셀로 정합니다. 상한 아래에서는 막대가 자기 몫의 밴드를 채우고, 넘어가면 남은 자리는 여백이 됩니다. density="compact"는 그 몫을 넓힙니다.

tsx

<BarChart valueLabels="extremes" rounded={false} barSize={12} density="compact" … />

접근성

데이터는 label을 caption으로 하는 화면에 보이지 않는 표로도 렌더링됩니다.
plot에 focus할 수 있습니다. ←·→(가로일 때는 ↑·↓)로 category를 옮기고, Home·End로 양 끝으로, Escape로 해제합니다.
맞닿은 막대는 테두리가 아니라 2px의 표면 색 간격으로 분리됩니다. 차트 위에 데이터가 아닌 잉크는 없습니다.

BarChart ​

Props ​

예시 ​

orientation ​

stacked ​

음수 값 ​

valueLabels · rounded · barSize ​

접근성 ​