BulletChart

Data Visualization

목표 대비 실적(KPI) 불릿 차트.

Usage

목표값·실적·정성 구간을 한 행에서 비교하는 KPI 화면에 사용한다.

import

import { BulletChart } from '@mildang/design-system/Chart';

API Reference

BulletChart Props

Prop

Type

Default

data

필수

TDatum[]

지정 안 함

labelKey

필수

string

지정 안 함

valueKey

필수

string

지정 안 함

className

string

지정 안 함

color

string

지정 안 함

legendPosition

"bottom" | "left" | "right" | "top"

bottom

margin

Partial<ChartMargin>

지정 안 함

max

number

지정 안 함

ranges

number[]

지정 안 함

showLegend

boolean

false

showTooltip

boolean

false

targetKey

string

지정 안 함

targetLabel

string

목표

valueFormat

(value: number) => string

(value: number) => value.toLocaleString()

valueLabel

string

실적

예제

기본

코드

Open in Playground

import { BulletChart } from '@mildang/design-system/Chart';

// 과목별 정답률(%) — 목표 대비 실적
const subjectData = [
  { subject: '영어 단어', score: 82, target: 90 },
  { subject: '영문법', score: 68, target: 75 },
  { subject: '독해', score: 91, target: 85 },
  { subject: '듣기', score: 74, target: 80 },
];

const BulletChartDefaultExample = () => (
    <BulletChart
      data={subjectData}
      labelKey="subject"
      valueKey="score"
      targetKey="target"
      ranges={[60, 80, 100]}
      showLegend
    />
  );

export default BulletChartDefaultExample;

Hover Tooltip

코드

Open in Playground

import { BulletChart } from '@mildang/design-system/Chart';

// 과목별 정답률(%) — 목표 대비 실적
const subjectData = [
  { subject: '영어 단어', score: 82, target: 90 },
  { subject: '영문법', score: 68, target: 75 },
  { subject: '독해', score: 91, target: 85 },
  { subject: '듣기', score: 74, target: 80 },
];

const BulletChartHoverTooltipExample = () => (
    <BulletChart
      data={subjectData}
      labelKey="subject"
      valueKey="score"
      targetKey="target"
      ranges={[60, 80, 100]}
      showTooltip
    />
  );

export default BulletChartHoverTooltipExample;

밴드 없음 (단일 트랙)

코드

Open in Playground

import { BulletChart } from '@mildang/design-system/Chart';

// 과목별 정답률(%) — 목표 대비 실적
const subjectData = [
  { subject: '영어 단어', score: 82, target: 90 },
  { subject: '영문법', score: 68, target: 75 },
  { subject: '독해', score: 91, target: 85 },
  { subject: '듣기', score: 74, target: 80 },
];

const BulletChartWithoutRangesExample = () => (
    <BulletChart data={subjectData} labelKey="subject" valueKey="score" targetKey="target" showTooltip />
  );

export default BulletChartWithoutRangesExample;

목표 없음

코드

Open in Playground

import { BulletChart } from '@mildang/design-system/Chart';

// 과목별 정답률(%) — 목표 대비 실적
const subjectData = [
  { subject: '영어 단어', score: 82, target: 90 },
  { subject: '영문법', score: 68, target: 75 },
  { subject: '독해', score: 91, target: 85 },
  { subject: '듣기', score: 74, target: 80 },
];

const BulletChartWithoutTargetExample = () => (
    <BulletChart data={subjectData} labelKey="subject" valueKey="score" ranges={[60, 80, 100]} showLegend />
  );

export default BulletChartWithoutTargetExample;

값 포맷 커스텀

코드

Open in Playground

import { BulletChart } from '@mildang/design-system/Chart';

// 반별 월 학습 시간(시간) — 목표 대비
const classData = [
  { className: '고1 집중반', hours: 42, goal: 40 },
  { className: '고2 심화반', hours: 35, goal: 45 },
  { className: '고3 실전반', hours: 51, goal: 50 },
];

const BulletChartCustomFormatExample = () => (
    <BulletChart
      data={classData}
      labelKey="className"
      valueKey="hours"
      targetKey="goal"
      ranges={[30, 45, 60]}
      valueLabel="학습 시간"
      targetLabel="목표 시간"
      valueFormat={(v) => `${v}시간`}
      showTooltip
      showLegend
    />
  );

export default BulletChartCustomFormatExample;

빈 데이터

코드

Open in Playground

import { BulletChart } from '@mildang/design-system/Chart';

const BulletChartEmptyExample = () => <BulletChart data={[]} labelKey="subject" valueKey="score" ranges={[60, 80, 100]} />;

export default BulletChartEmptyExample;

데이터 1개

코드

Open in Playground

import { BulletChart } from '@mildang/design-system/Chart';

const BulletChartSingleRowExample = () => (
    <BulletChart
      data={[{ subject: '수학', score: 77, target: 85 }]}
      labelKey="subject"
      valueKey="score"
      targetKey="target"
      ranges={[60, 80, 100]}
      showTooltip
    />
  );

export default BulletChartSingleRowExample;

0값 포함

코드

Open in Playground

import { BulletChart } from '@mildang/design-system/Chart';

const BulletChartZeroValueExample = () => (
    <BulletChart
      data={[
        { subject: '영어 단어', score: 0, target: 90 },
        { subject: '영문법', score: 68, target: 0 },
        { subject: '독해', score: 0, target: 0 },
      ]}
      labelKey="subject"
      valueKey="score"
      targetKey="target"
      ranges={[60, 80, 100]}
      showTooltip
    />
  );

export default BulletChartZeroValueExample;

반응형 (너비 자동 조정)

코드

Open in Playground

import { BulletChart } from '@mildang/design-system/Chart';

// 과목별 정답률(%) — 목표 대비 실적
const subjectData = [
  { subject: '영어 단어', score: 82, target: 90 },
  { subject: '영문법', score: 68, target: 75 },
  { subject: '독해', score: 91, target: 85 },
  { subject: '듣기', score: 74, target: 80 },
];

const BulletChartResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: '100%' }}>
      {([320, 480, 720] as const).map((w) => (
        <div key={w} style={{ width: w, height: 220 }}>
          <BulletChart
            data={subjectData}
            labelKey="subject"
            valueKey="score"
            targetKey="target"
            ranges={[60, 80, 100]}
          />
        </div>
      ))}
    </div>
  );

export default BulletChartResponsiveExample;