Bullet Chart

Compare a value against a target and qualitative range bands in a compact bar.

npm install @plocks/charts

Examples

Properties

Playground

Basics

The bar shows the value, the marker shows the target, and the shaded bands behind them show the qualitative ranges.

Loading demo…

import { BulletChart } from '@plocks/charts';

import { REVENUE_RANGES } from './data';

export function Demo() {
  return <BulletChart label="Revenue" description="USD, Q3" value={230000} target={250000} ranges={REVENUE_RANGES} maw={520} />;
}

Range colors

Give each range its own color and label; the label appears in the tooltip and the accessible description.

Loading demo…

import { BulletChart } from '@plocks/charts';

import { SATISFACTION_RANGES } from './data';

export function Demo() {
  return (
    <BulletChart
      label="Satisfaction"
      description="Score out of 100"
      value={72}
      target={85}
      ranges={SATISFACTION_RANGES}
      color="#334155"
      maw={520}
    />
  );
}

Vertical

orientation="vertical" grows the bar upward, with the label above it and the axis on the left.

Loading demo…

import { BulletChart } from '@plocks/charts';

export function Demo() {
  return (
    <BulletChart
      orientation="vertical"
      label="Profit"
      description="%"
      value={22}
      target={26}
      ranges={[{ value: 20 }, { value: 25 }, { value: 30 }]}
      h={280}
    />
  );
}

Value formatter

valueFormatter formats the axis ticks, the tooltip and the accessible label.

Loading demo…

import { BulletChart } from '@plocks/charts';

export function Demo() {
  return (
    <BulletChart
      value={230000}
      target={150000}
      ranges={[{ value: 100000 }, { value: 200000 }, { value: 300000 }]}
      valueFormatter={(v) => `$${(v / 1000).toFixed(0)}k`}
      maw={520}
    />
  );
}

Multiple bullets

Pass data to draw several bullets on one shared scale; target and ranges on the chart apply to rows that omit them.

Loading demo…

import { BulletChart } from '@plocks/charts';

import { KPIS } from './data';

export function Demo() {
  return <BulletChart data={KPIS} ranges={[{ value: 60 }, { value: 90 }, { value: 120 }]} maw={560} />;
}

Scan to open this page on your phoneplocks.dev/charts/BulletChart

Related charts

Bar Chart

Radial Bar Chart

Bullet Chart

Basics

Range colors

Vertical

Value formatter

Multiple bullets

Related charts

Further reading

plocks