Bullet Chart

Actual vs target against qualitative bands (poor/ok/good as three steps of the sequential ramp, light to dark). Compact alternative to gauges.

Import

import { BulletChart } from '@marbleui/ui'

Props

<BulletChart>

Prop	Type	Default
rows *required	`BulletRow[]`	`—`
summary *required	`string`	`—`
className	`string`	`—`
title	`string`	`—`

Usage notes

Actual vs. target for several metrics, each against poor / ok / good bands. A compact alternative to a row of Gauges.

<BulletChart
  title="Q4 targets"
  summary="Revenue at $420K vs a $500K target; activation at 61% beats the 55% target."
  rows={[
    { label: 'Revenue', value: 420, target: 500, ranges: [300, 450, 600], format: (n) => `$${n}K` },
    { label: 'Activation', value: 61, target: 55, ranges: [30, 50, 80], format: (n) => `${n}%` },
  ]}
/>

ranges are the upper edges of the poor, ok and good bands. The scale runs from 0 to ranges[2] and values beyond it are clamped; a target at or above ranges[2] falls outside the track and isn’t drawn.
format is per row, so each metric keeps its own units in the “actual / target” text and the “Show data” table. The table lists actual and target only, not the bands.
The actual value is a bar in the text colour, the target a thin accent line, and the bands three steps of the sequential palette.

Example source · show

import { BulletChart } from './bullet-chart'

const usd = (n: number) => `$${n}K`
export const styles = { Default: () => <BulletChart className="w-[32rem] max-w-full" title="Q4 targets" summary="Revenue at $420K vs $500K target; NPS 48 vs 50; activation 61% beats the 55% target." rows={[{ label: 'Revenue', value: 420, target: 500, ranges: [300, 450, 600], format: usd }, { label: 'NPS', value: 48, target: 50, ranges: [20, 40, 70] }, { label: 'Activation', value: 61, target: 55, ranges: [30, 50, 80], format: (n) => `${n}%` }]} /> }

Source: packages/ui/src/bullet-chart/bullet-chart.tsx

Catalog