BulletChart

BulletChart

값(value), 목표(target), 정성적 범위(qualitative ranges)를 표시하는 콤팩트한 KPI 차트예요. 실제 값과 목표를 배경 밴드와 함께 한눈에 보여줄 때 유용해요.

출처: 문서

본문

Usage

BulletChart는 실제 값을 목표(target)와 대비해 정성적 범위를 배경 밴드로 표시하는 콤팩트한 KPI 차트예요. 필수 prop은 value와 ranges예요. 라벨은 범위 경계, 목표 위치, 막대 값에 자동으로 표시돼요.

import { BulletChart } from '@mantine/charts';
import { ranges } from './data';

function Demo() {
  return (
    <BulletChart
      data={[{ name: 'Revenue', value: 230000 }]}
      ranges={ranges}
      valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`}
    />
  );
}

Data format

BulletChart는 value와 color 속성을 가진 객체 배열을 ranges로 기대해요. 범위는 뒤에서 앞으로(가장 큰 것부터) 렌더링되므로 작은 범위가 큰 범위 위에 겹쳐져요.

const ranges = [
  { value: 150000, color: 'red.8', label: 'Poor' },
  { value: 225000, color: 'yellow.8', label: 'Average' },
  { value: 300000, color: 'teal.8', label: 'Good' },
];

Label

label prop으로 차트 옆에 라벨을 표시할 수 있어요.

Vertical orientation

orientation="vertical"로 차트를 세로로 렌더링할 수 있어요. 세로 방향에서는 컴포넌트에 고정 높이를 설정해야 해요.

import { BulletChart } from '@mantine/charts';
import { ranges } from './data';

function Demo() {
  return (
    <BulletChart
      data={[{ name: 'Revenue', value: 230000 }]}
      ranges={ranges}
      orientation="vertical"
      valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`}
      h={250}
    />
  );
}

Bar color

기본적으로 막대 색은 흰색이에요. barColor prop으로 실제 값 막대의 색을 커스터마이즈하고, targetColor로 목표 마커 색을 바꿀 수 있어요.

Chart size

size prop으로 차트 트랙 영역의 높이를 제어할 수 있어요. barSize prop은 실제 값 막대의 높이를 독립적으로 제어해요.

import { BulletChart } from '@mantine/charts';
import { Stack } from '@mantine/core';
import { ranges } from './data';

function Demo() {
  return (
    <Stack>
      <BulletChart size={20} data={[{ name: 'Revenue', value: 230000 }]} ranges={ranges}
        valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`} />
      <BulletChart data={[{ name: 'Revenue', value: 230000 }]} ranges={ranges}
        valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`} />
      <BulletChart size={40} data={[{ name: 'Revenue', value: 230000 }]} ranges={ranges}
        valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`} />
    </Stack>
  );
}

Value formatter

valueFormatter prop으로 라벨과 툴팁에 표시되는 값을 형식화할 수 있어요. withTooltip을 설정하면 호버 시 툴팁도 표시돼요.

Without target

target prop은 선택사항이에요. 제공하지 않으면 목표 마커가 렌더링되지 않아요.

더 알아보기 (Learn more)

• BarsList
• GaugeChart