Bullet Chart

"use client"

import { BulletChart } from "@/components/ui/charts"

const data = [
  {
    label: "Revenue",
    value: 275,
    target: 250,
    ranges: [150, 225, 300] as [number, number, number],
  },
  {
    label: "Profit",
    value: 85,
    target: 100,
    ranges: [50, 75, 120] as [number, number, number],
  },
  {
    label: "Orders",
    value: 320,
    target: 300,
    ranges: [200, 275, 350] as [number, number, number],
  },
  {
    label: "Satisfaction",
    value: 4.5,
    target: 4.2,
    ranges: [3.0, 4.0, 5.0] as [number, number, number],
  },
]

export function BulletChartDemo() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <BulletChart data={data} />
    </div>
  )
}

About

The Bullet Chart is a variation of a bar chart designed to replace dashboard gauges. It displays a primary measure, compares it against a target, and shows qualitative ranges (poor, satisfactory, good).

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/bullet-chart.json
Copy

Usage

Copyimport { BulletChart } from "@/components/ui/charts"
 
const data = [
  {
    label: "Revenue",
    value: 275,
    target: 250,
    ranges: [150, 225, 300], // [poor, satisfactory, good]
  },
]
 
export function Example() {
  return <BulletChart data={data} />
}

API Reference

Notes

• Bullet charts are designed as a space-efficient alternative to dashboard gauges and meters
• The ranges array typically represents performance thresholds: [poor, satisfactory, good]
• Target markers provide a clear visual comparison point for actual performance
• Horizontal orientation is recommended for most use cases as it's more space-efficient
• Multiple bullet charts can be stacked vertically to compare different metrics in a compact layout
• The component is ideal for KPI dashboards where space is at a premium