불릿 차트

실적 하나를 목표 눈금과 평가 구간(나쁨 · 보통 · 좋음) 위에 가로 한 줄로 보여 주는 표현 전용 차트입니다. 게이지보다 좁은 자리에서 실적과 목표의 차이를 더 정확하게 읽을 수 있습니다. 구간은 계열색이 아닌 글자색 면이라 실적 막대만 색을 갖고, 라벨 줄에 실적 / 목표 · 달성률이 나옵니다. 처음 그려질 때 실적 막대가 왼쪽부터 자라고 목표 눈금이 그 뒤에 나타납니다.

상태

수강료 수납률65% / 90% · 72%

목표 + 평가 구간

10월 매출1019만원 / 1200만원 · 85%

구간 없이 목표만

활용 방법

담당자별 영업 목표

여러 줄을 쌓아도 축 끝(max)을 같게 주면 줄끼리 길이를 비교할 수 있습니다.

Preview

김도현18건 / 20건 · 90%

이서연24건 / 20건 · 120%

박준호9건 / 20건 · 45%

tsx

<BulletChart
  label="김도현"
  value={18}
  target={20}
  ranges={[10, 18, 26]}
  max={26}
  formatValue={(v) => `${v}건`}
/>

속성

이름	타입	기본값	설명
value	number	-	실적
target	number	-	목표. 세로 눈금으로 그리고 라벨 줄에 달성률을 보인다
ranges	number[]	-	평가 구간의 위 경계(오름차순, 최대 3개). 첫 구간이 가장 진하다
max	number	ranges 끝 또는 1.1배	축 끝. 여러 줄을 비교할 때 같게 준다
label	string	-	왼쪽 위 라벨
tone	ChartTone	"primary"	실적 막대 색
formatValue	(v: number) => string	ko-KR 콤마	실적 · 목표 값 포맷