BulletChart | Mantine

Usage

BulletChart is a compact KPI chart that displays an actual value against a target with qualitative ranges as background bands. The required props are value and ranges.

$300k

$200k

$100k

$150k

$230k

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

function Demo() {
  return (
    <BulletChart
      value={230000}
      target={150000}
      ranges={ranges}
      valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`}
    />
  );
}

Data format

BulletChart expects ranges as an array of objects with value and color properties:

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

Label

Use label prop to display a label next to the chart:

Revenue

$300k

$200k

$100k

$150k

$230k

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

function Demo() {
  return (
    <BulletChart
      value={230000}
      target={150000}
      ranges={ranges}
      label="Revenue"
      valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`}
    />
  );
}

Vertical orientation

Set orientation="vertical" to render the chart vertically. Note that you need to set a fixed height on the component when using vertical orientation:

$300k

$200k

$100k

$150k

$230k

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

function Demo() {
  return (
    <BulletChart
      value={230000}
      target={150000}
      ranges={ranges}
      orientation="vertical"
      valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`}
      h={250}
    />
  );
}

Bar color

By default, the bar color is white. Use barColor prop to customize the color of the actual value bar. Use targetColor to change the target marker color:

$300k

$200k

$100k

$150k

$230k

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

function Demo() {
  return (
    <BulletChart
      value={230000}
      target={150000}
      ranges={ranges}
      barColor="black"
      targetColor="white"
      valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`}
    />
  );
}

Chart size

Use size prop to control the height of the chart track area. The barSize prop controls the height of the actual value bar independently:

Small

$300k

$200k

$100k

$150k

$230k

Default

$300k

$200k

$100k

$150k

$230k

Large

$300k

$200k

$100k

$150k

$230k

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

function Demo() {
  return (
    <Stack>
      <BulletChart
        value={230000}
        target={150000}
        ranges={ranges}
        size={20}
        label="Small"
        valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`}
      />
      <BulletChart
        value={230000}
        target={150000}
        ranges={ranges}
        size={32}
        label="Default"
        valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`}
      />
      <BulletChart
        value={230000}
        target={150000}
        ranges={ranges}
        size={48}
        label="Large"
        valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`}
      />
    </Stack>
  );
}

Value formatter

Use valueFormatter prop to format values displayed in labels and tooltips. Set withTooltip to also show a tooltip on hover:

$300k

$200k

$100k

$150k

$230k

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

function Demo() {
  return (
    <BulletChart
      value={230000}
      target={150000}
      ranges={ranges}
      withTooltip
      valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`}
    />
  );
}

Without target

The target prop is optional. If not provided, the target marker is not rendered:

$300k

$200k

$100k

$230k

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

function Demo() {
  return (
    <BulletChart
      value={230000}
      ranges={ranges}
      valueFormatter={(value) => `$${(value / 1000).toFixed(0)}k`}
    />
  );
}

BarsList

GaugeChart