Dashboards love to show progress. The user’s eyes immediately go to the widgets: bars, dials, and pie slices that tell a story about whether things are on track. But many of those visualisations come with baggage—gauge charts take up a ton of space for a single value, progress bars only tell you a percentage, and simple numbers lack context.

The bullet chart solves that with almost no wasted ink. It was invented by Stephen Few, a data visualisation expert, specifically to replace the bulky gauges and meters that plague business dashboards. A single horizontal bar shows the actual performance. A vertical line marks the target. Coloured background bands give at‑a‑glance context: good, satisfactory, and poor ranges. All in the space of a sentence.

If you search for “React bullet chart,” you won’t find a ready‑made npm package with a million downloads. It’s not a standard chart type in most React chart libraries. But that doesn’t mean you need to build one from scratch with raw SVG. With the right primitives from a library like Recharts, you can assemble a bullet chart in less than 50 lines of JSX. Let me show you exactly how.

Why bullet charts aren’t just skinny bar charts

At first glance, a bullet chart looks like a horizontal stacked bar with a vertical line on top. But the combination of components tells a richer story than any individual element could.

The actual value is the long bar—how much revenue you’ve made, how many units you’ve sold, how far through a sprint you are.

The target marker is a vertical line (or a small bar) showing the goal. In a bar chart, you’d have to mentally compare the bar’s length to an imaginary number. The bullet chart makes the comparison explicit.

The qualitative ranges behind the bar are the secret sauce. Three or five shaded bands, usually from dark to light, represent performance levels: poor, satisfactory, good, excellent. The reader instantly knows whether the actual value is in the danger zone or comfortably in the green.

Because all this information is packed into a single row, bullet charts can be stacked vertically in a dashboard without overwhelming the viewer. A finance dashboard might show actual vs. target for revenue, costs, and profit in the space of one traditional gauge.

The simplest bullet chart with Recharts

Recharts doesn’t have a <BulletChart> component, but it has everything you need: a <BarChart> with custom bars and a <ReferenceLine> or a separate <LineChart> overlaid to mark the target. Here’s the cleanest approach I’ve found.

First, let’s define our data model. For a single bullet chart, you need:

The actual value (a number)
The target (a number)
The range breaks (three or five numbers that define the coloured bands)

I’ll build a component that accepts these as props and renders the bullet chart.

// BulletChart.jsx
import {
  BarChart,
  Bar,
  XAxis,
  ReferenceLine,
  ResponsiveContainer,
  Cell,
} from "recharts";

const BulletChart = ({ actual, target, ranges, height = 60 }) => {
  // Transform the ranges into Recharts data
  const data = ranges.map((value, index) => ({
    name: `Range ${index + 1}`,
    value,
  }));

  // Add the actual value as the last segment (so it sits on top visually)
  data.push({ name: "Actual", value: actual });

  // Define colours for the background bands (light to dark)
  const rangeColors = ["#f0f0f0", "#e0e0e0", "#d0d0d0", "#c0c0c0", "#b0b0b0"];

  return (
    <ResponsiveContainer width="100%" height={height}>
      <BarChart
        layout="vertical"
        data={data}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
        barCategoryGap={0}
      >
        <XAxis
          type="number"
          domain={[0, Math.max(...ranges, target, actual) * 1.1]}
          hide
        />
        {/* Background bands */}
        {data.slice(0, -1).map((entry, index) => (
          <Bar
            key={`range-${index}`}
            dataKey="value"
            fill={rangeColors[index]}
            stackId="background"
            isAnimationActive={false}
          />
        ))}
        {/* Actual value bar (overlaid on background, but using a separate Bar to be on top) */}
        <Bar
          dataKey="value"
          fill="#3b82f6"
          stackId="actual"
          isAnimationActive={false}
        >
          {data.map((entry, index) => (
            <Cell
              key={`cell-${index}`}
              fill={index === data.length - 1 ? "#3b82f6" : "transparent"}
            />
          ))}
        </Bar>
        {/* Target line */}
        <ReferenceLine x={target} stroke="#ef4444" strokeWidth={3} />
      </BarChart>
    </ResponsiveContainer>
  );
};

export default BulletChart;

Hold on—that double stack trick to make the actual bar appear on top of the background bands while keeping the bands visible is a bit hacky. A cleaner method is to use a single horizontal bar with a custom shape for the actual value, and draw the bands as coloured <Rect> elements in a custom background. But that means dropping into SVG primitives. For a quick dashboard, the approach above works surprisingly well. The ReferenceLine draws the target marker, and the colour distinction tells the story.

If you want more control, you can build the bullet chart entirely with Recharts’ <Customized> component or raw SVG. I’ll show that as an alternative later.

Adding context: qualitative bands and labels

The background bands are meaningless without a legend. You need to let the user know what each shade represents. A small legend above or below the chart can spell it out.

const rangeLabels = ["Poor", "Satisfactory", "Good", "Excellent"];
// In the component, after the chart:
<div
  style={{
    display: "flex",
    justifyContent: "space-between",
    fontSize: "12px",
    color: "#6b7280",
  }}
>
  {rangeLabels.map((label, i) => (
    <span key={i}>{label}</span>
  ))}
</div>;

Now the bullet chart is readable at a glance. The actual value bar is blue, the target line is red, and the background shades light to dark. You can tweak the colours and heights to match your design system. A typical dashboard bullet chart is only 30–50 pixels tall, so every pixel of visual weight matters.

Interactive bullet charts: tooltips and hover

A static bullet chart tells the story, but dashboards often need interactivity. When the user hovers over the actual value bar, you want to show the exact number, the target, and maybe the percentage achieved. Recharts’ <Tooltip> component makes this straightforward.

import { Tooltip } from "recharts";

// Inside BarChart
<Tooltip
  formatter={(value, name) => {
    if (name === "Actual") return [`${value.toLocaleString()}`, "Actual"];
    return [null, null];
  }}
  labelFormatter={() => ""}
/>;

Since we have multiple data entries (background bands and the actual value), the tooltip might try to show all of them. The formatter lets you filter out the background bands and only display the actual value. You can also add a custom tooltip that shows the target.

const CustomTooltip = ({ active, payload }) => {
  if (active && payload && payload.length) {
    const actual = payload.find((p) => p.name === "Actual")?.value;
    return (
      <div
        style={{
          background: "white",
          border: "1px solid #ddd",
          padding: "8px",
          borderRadius: "4px",
        }}
      >
        <p style={{ margin: 0 }}>Actual: {actual?.toLocaleString()}</p>
        <p style={{ margin: 0, color: "#ef4444" }}>
          Target: {target.toLocaleString()}
        </p>
      </div>
    );
  }
  return null;
};

Now hovering over the chart shows a clean tooltip with both numbers.

The fully custom SVG approach (for complete control)

When the Recharts abstraction feels limiting, you can draw the bullet chart directly with SVG. It’s less code than you think, and it gives you pixel‑perfect control. This is useful if you want to animate the bar, style the target line differently, or embed the chart in a larger custom visualisation.

const BulletChartSVG = ({
  actual,
  target,
  ranges,
  width = 400,
  height = 30,
}) => {
  const maxVal = Math.max(...ranges, target, actual) * 1.1;
  const scale = (val) => (val / maxVal) * width;

  return (
    <svg width={width} height={height}>
      {ranges.map((rangeEnd, i) => {
        const start = i === 0 ? 0 : ranges[i - 1];
        const bandWidth = scale(rangeEnd) - scale(start);
        return (
          <rect
            key={i}
            x={scale(start)}
            y={0}
            width={bandWidth}
            height={height}
            fill={["#f0f0f0", "#e0e0e0", "#d0d0d0", "#c0c0c0"][i % 4]}
          />
        );
      })}
      {/* Actual bar */}
      <rect x={0} y={0} width={scale(actual)} height={height} fill="#3b82f6" />
      {/* Target line */}
      <line
        x1={scale(target)}
        y1={0}
        x2={scale(target)}
        y2={height}
        stroke="#ef4444"
        strokeWidth={3}
      />
    </svg>
  );
};

This is bare‑bones but completely understandable. You can animate the actual bar with CSS transitions or react‑spring. The target line can be a dashed line, a triangle, or a custom marker. The background bands can use linear gradients to look polished.

If you've been building dashboards with our React chart library comparison in mind, you'll notice that bullet charts are often not included out of the box. The SVG approach lets you use any library's primitives—or none at all.

Stacking bullet charts for a dashboard

The real power of bullet charts is when you put several side by side, one per key performance indicator. With the component built, stacking them is trivial:

<BulletChart actual={4500} target={5000} ranges={[2500, 4000, 5500, 7000]} />
<BulletChart actual={8200} target={8000} ranges={[4000, 6000, 8000, 10000]} />
<BulletChart actual={1200} target={1500} ranges={[500, 1000, 1500, 2000]} />

In a real dashboard, you'd map over an array of KPIs. The compact height means you can fit ten KPIs in the space of a normal screen, giving the user an instant snapshot of performance. Add a subtle border between rows and you have a professional‑looking executive summary.

A story: why I ditched custom gauge charts

A previous client had a dashboard built with custom SVG gauge charts. They were beautiful, with glowing arcs and animated needles. The problem was information density. On a laptop screen, the dashboard showed four gauges before scrolling. Four numbers. Users had to scroll to see the full picture.

We replaced the gauges with bullet charts. The same screen now showed twelve KPIs, each with actual, target, and qualitative context. Users could scan the entire performance summary in a few seconds. The feedback was overwhelmingly positive. They'd become numb to the "cool" factor of gauges and just wanted to get their work done.

Bullet charts aren't flashy. They're utilitarian. But that's exactly why they belong on dashboards. They give you the information you need and get out of the way.

When to use a bullet chart instead of something else

A bullet chart shines when you have a single metric that needs to be compared to a target or a set of thresholds. If your dashboard shows ten or more KPIs, bullet charts are the most space‑efficient way to present them.

If you only have one metric, a simple number with a coloured badge (green for on‑target, red for off‑target) might be enough. If you need to show historical trends—how the metric changed over time—a sparkline is better. But for the common case of "here's where we stand against our goal," nothing beats the bullet chart.

Wrapping up

You don't need a specialised React library to build bullet charts. With Recharts or plain SVG, you can assemble them in minutes. They'll make your dashboards more readable, more professional, and more useful to the people who rely on them.

The next time you reach for a gauge chart, ask yourself: would a bullet chart tell the same story in less space? The answer is usually yes.

Need a dashboard that presents complex data clearly? Red Surge Technology builds data‑dense interfaces that help users make decisions faster. Get in touch to discuss your project.

React Bullet Chart: Build Performance Gauges Without a Custom Library