스몰 멀티플

같은 눈금의 작은 차트를 격자로 늘어놓아 여러 계열의 추이를 나란히 비교하는 표현 전용 차트입니다. 지점 · 라인 · 채널별 추이에 씁니다. 모든 칸이 0 을 포함한 같은 y 범위를 쓰므로 칸끼리 높이를 그대로 비교할 수 있습니다. 칸마다 눈금을 따로 잡으면 작은 값도 꽉 차 보여 비교가 틀어집니다. 계열은 칸 제목으로 가르므로 색은 한 가지입니다.

상태

강남점66백만

5월10월

판교점45백만

5월10월

홍대점20백만

5월10월

모든 칸 같은 눈금 · 0백만~75백만

선

강남점66백만

5월10월

판교점45백만

5월10월

홍대점20백만

5월10월

모든 칸 같은 눈금 · 0백만~75백만

막대

활용 방법

지점별 월 매출

칸 머리 오른쪽은 마지막 값이다. 폭에 따라 열 수가 정해진다(minWidth 이상).

Preview

강남점66백만

5월10월

판교점45백만

5월10월

홍대점20백만

5월10월

부산점25백만

5월10월

대구점16백만

5월10월

광주점15백만

5월10월

모든 칸 같은 눈금 · 0백만~75백만

tsx

<SmallMultiples
  labels={["5월", "6월", "7월", "8월", "9월", "10월"]}
  items={[
    { label: "강남점", values: [42, 48, 51, 55, 61, 66] },
    { label: "판교점", values: [30, 33, 31, 36, 40, 45] },
    // ...
  ]}
  formatValue={(v) => `${v}백만`}
/>

속성

이름	타입	기본값	설명
items	SmallMultiple[]	-	{ label, values }. 칸 하나가 계열 하나
labels	string[]	-	x 라벨. 칸마다 처음 · 끝만 보인다
kind	"line" \| "bar"	"line"	칸 차트 모양
tone	ChartTone	"primary"	선 · 막대 색(모든 칸 같음)
height	number	56	칸 플롯 높이(px)
minWidth	number	150	칸 최소 폭(px). 좁아지면 열 수가 준다
formatValue	(v: number) => string	ko-KR 콤마	값 포맷