복합 차트

같은 단위의 막대 계열과 선 계열을 한 y축에 겹쳐 그리는 표현 전용 차트입니다. 매출 · 매입을 막대로, 그 차이인 손익을 선으로 함께 읽을 때 씁니다. 단위가 다른 값을 좌우 두 축에 올리지 않습니다(눈금 배율에 따라 교차와 기울기가 달라 보이기 때문). 음수 막대는 0 기준선 아래로 내려가고, 칸이 12개 이하면 선의 지점마다 점을 찍습니다. 처음 그려질 때 막대가 기준선에서 자라고 이어서 선이 왼쪽부터 그려집니다.

상태

주문 건수목표

0100200300

1분기2분기3분기4분기

막대 하나 + 선

매출매입손익

-50050100

1분기2분기3분기4분기

음수 손익

활용 방법

월별 매출 · 매입과 손익

데이터가 바뀌면 막대 높이가 새 값으로 옮겨 갑니다. 칸에 마우스를 올리거나 탭하면 막대와 선의 값이 한 툴팁에 나옵니다.

Preview

매출매입손익

0만원2,000만원4,000만원6,000만원

5월6월7월8월9월10월

tsx

<ComboChart
  height={220}
  categories={["5월", "6월", "7월", "8월", "9월", "10월"]}
  bars={[
    { label: "매출", values: sale, tone: "primary" },
    { label: "매입", values: buy, tone: "warning" },
  ]}
  lines={[{ label: "손익", values: sale.map((s, i) => s - buy[i]), tone: "success" }]}
  formatValue={(v) => `${v.toLocaleString("ko-KR")}만원`}
/>

속성

이름	타입	기본값	설명
categories	string[]	-	x축 카테고리 라벨
bars	ComboBarSeries[]	-	막대 계열: { label, values, tone? }. 칸마다 나란히 놓인다
lines	ComboLineSeries[]	-	선 계열: { label, values(null 은 건너뜀), tone? }. tone 이 없으면 첫 선은 글자색, 둘째부터 막대 다음 계열색
height	number	200	플롯 영역 높이(px)
formatValue	(v: number) => string	ko-KR 콤마	y축 · 툴팁 값 포맷