Skip to content

Components

BulletChart

Resolved requests

  • Web
  • Email
  • Chat

Component reference

Properties

Use BulletChart

Actual values and targets on the same horizontal scale.

Example import style
bullet-chart.tsxTSX
"use client";

import { FloodRoot, BulletChart } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <BulletChart label="Resolved requests" max={100} items={[
        {id:"web", label:"Web", value:74, target:80},
        {id:"email", label:"Email", value:56, target:50}
      ]} />
    </FloodRoot>
  );
}

Design notes

  • Supply finite nonnegative actuals and targets in the same unit. Use a shared max to compare separate charts.
  • The fill shows the actual value and the vertical marker shows the target. Both exact values are visible without interaction.

API reference

PropValuesDefault
labelstringRequired
itemsreadonly BulletChartItem[]Required
maxnumber—
formatValue(value: number) => string—
valueLabelstring—
targetLabelstring—
emptyLabelstring—
Native HTML propsOmit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label">Forwarded
View TypeScript source