# BulletChart

> Bullet graph: one measured bar against a target tick, on qualitative bands (poor, fair, good).

Source: https://ui.jcsoftdev.com/docs/components/bullet-chart

Bullet graph: one measured bar against a target tick, on qualitative bands
(poor, fair, good). Many rows compare KPIs in little space; each row has its
own scale unless `scale="shared"`.

## Import

```ts
import { BulletChart } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/bullet-chart`.

## Usage

```tsx
<BulletChart
  title="Indicadores de la barbería en octubre"
  items={kpis}
  rangeLabels={["Bajo", "Aceptable", "Bueno"]}
  actualLabel="Actual"
  targetLabel="Meta"
  orientation="horizontal"
  scale="row"
  rowHeight={46}
  valueLabels
  legend
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` * | `readonly BulletItem[]` |  |  |
| `title` * | `string` |  | Accessible name of the chart. |
| `description` | `string` |  |  |
| `rangeLabels` | `readonly string[]` | `[]` | Names of the qualitative ranges, lowest first (e.g. "Bajo", "Medio", "Alto"). |
| `actualLabel` | `string` | `"Actual"` |  |
| `targetLabel` | `string` | `"Target"` |  |
| `color` | `string` |  | Color of the actual bar (default: the brand slot of the palette). |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |  |
| `scale` | `"row" \| "shared"` | `"row"` | "row" gives every row its own 0-to-max scale (mixed units); "shared" draws one axis for all. |
| `valueFormat` | `ValueFormat` |  |  |
| `rowHeight` | `number` | `46` | Height of every row in pixels (default 46), horizontal charts without `height`. |
| `height` | `number \| "fill"` |  | Height in pixels, or `"fill"` for the parent height. |
| `aspectRatio` | `number` |  |  |
| `valueLabels` | `boolean` | `true` | Actual and target written at the end of each row (default true when there is room). |
| `legend` | `boolean` | `true` |  |
| `tooltip` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `animate` | `boolean` | `true` |  |
| `labels` | `Partial<ChartLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-bulletchart--default)
- [Vertical](/storybook/?path=/story/charts-bulletchart--vertical)
- [Shared Scale](/storybook/?path=/story/charts-bulletchart--shared-scale)
- [Without Target](/storybook/?path=/story/charts-bulletchart--without-target)
- [Loading](/storybook/?path=/story/charts-bulletchart--loading)
- [Empty](/storybook/?path=/story/charts-bulletchart--empty)
- [Narrow](/storybook/?path=/story/charts-bulletchart--narrow)
- [Narrow Vertical](/storybook/?path=/story/charts-bulletchart--narrow-vertical)
- [Fill Parent](/storybook/?path=/story/charts-bulletchart--fill-parent)

## Source

`packages/ui/src/charts/bullet-chart/bullet-chart.tsx`