롤리팝 차트

카테고리 크기 비교를 가는 스템 + 도트로 보여주는 막대의 가벼운 대안: 좁은 카드에 여러 항목을 나열할 때 적합하다. 같은 척도의 크기 비교라 단일 색만 쓰고(색은 역할이 있을 때만), 기본은 값 내림차순 정렬이다.

상태

아메리카노

1,240

카페라떼

980

콜드브루

760

바닐라라떼

540

티

420

정렬 (기본)

아메리카노

1,240

카페라떼

980

콜드브루

760

바닐라라떼

540

티

420

입력 순서 (sort=false)

아메리카노

1,240

카페라떼

980

콜드브루

760

바닐라라떼

540

티

420

success tone

활용 방법

메뉴별 판매량

labelW 로 라벨 칼럼 폭을 넓혀 긴 이름(메뉴명 등)을 담는다. formatValue 로 값 단위를 바꾼다.

Preview

아메리카노

1,240잔

카페라떼

980잔

콜드브루

760잔

바닐라라떼

540잔

티

420잔

tsx

<Lollipop
  items={[
    { label: "아메리카노", value: 1240 },
    { label: "카페라떼", value: 980 },
    { label: "콜드브루", value: 760 },
  ]}
  labelW={80}
  formatValue={(v) => `${v.toLocaleString("ko-KR")}잔`}
/>

속성

이름	타입	기본값	설명
items	LollipopItem[]	-	항목 배열: { label, value }
tone	ChartTone	"primary"	스템·도트 색(단일 색)
sort	boolean	true	값 내림차순 정렬. false 면 입력 순서 유지
labelW	number	40	라벨 칼럼 폭(px)
formatValue	(v: number) => string	ko-KR 콤마	값 라벨·툴팁 포맷