순위 막대

순위 목록을 가로 막대로 보여 주는 표현 전용 차트입니다. 라벨이 막대 안에 들어가 거래처 · 품목처럼 긴 이름도 잘리지 않고 읽힙니다. 막대는 계열색 18% 면이고 라벨은 글자색, 값은 오른쪽에 있습니다. 짧은 라벨의 크기 비교는 롤리팝 차트를, 긴 라벨의 순위 목록은 이 차트를 씁니다. 처음 그려질 때 위 행부터 막대가 왼쪽에서 자랍니다.

상태

(주)한빛정밀기계

4200만

대성산업

3100만

미래유통 물류센터

1800만

그린푸드

1350만

서울테크

900만

기본(내림차순)

(주)한빛정밀기계

4200만

대성산업

3100만

미래유통 물류센터

1800만

순위 번호 + 상위 3개

활용 방법

이번 달 상위 거래처

sort는 기본으로 값 내림차순입니다. 입력 순서를 그대로 보이려면 sort={false}를 줍니다.

Preview

(주)한빛정밀기계

4,200만원

대성산업

3,100만원

미래유통 물류센터

1,800만원

그린푸드

1,350만원

서울테크

900만원

tsx

<BarList
  items={vendors}  // { label, value }[]
  rank
  formatValue={(v) => `${v.toLocaleString("ko-KR")}만원`}
/>

속성

이름	타입	기본값	설명
items	BarListItem[]	-	항목 배열 { label, value }
tone	ChartTone	"primary"	막대 색(18% 면)
sort	boolean	true	값 내림차순 정렬
limit	number	-	위에서 이만큼만 보인다
rank	boolean	false	왼쪽에 순위 번호
formatValue	(v: number) => string	ko-KR 콤마	값 포맷