---
title: "New Component - Bullet Charts (Actual vs Target)"
description: "A compact measure bar against a target marker over qualitative range bands. The dashboard-friendly way to show actual vs target for KPIs."
url: "https://www.imejis.io/changelogs/bullet-component"
image: "https://www.imejis.io/og/components/bullet.jpg"
published: "2026-07-21"
author: "imejis"
---

# New Component - Bullet Charts (Actual vs Target)

## New Component: Bullet

Gauges look nice but waste space. The bullet chart is the analyst's answer: one tight row per KPI that shows the value, the target, and how good that value is, all in a strip.

### The data

Each row is `{ label, value, target, ranges }`:

- `value` draws the measure bar.
- `target` draws a vertical tick to beat.
- `ranges` are ascending thresholds (say `[150, 225, 300]`) that split the track into graded qualitative bands: poor, satisfactory, good.

Scale is per-row `max`/`ranges` with global fallbacks, or it auto-fits to the largest value in the row. Set a shared `max` across rows (like `100` for percent-to-goal) and every target tick lines up, so you can compare rows at a glance.

### Dynamic data, per render

```http
POST https://render.imejis.io/v1/<design-id>
{ "kpis.data": [
  { "label": "Revenue", "value": 268, "target": 250, "ranges": [150, 225, 300] },
  { "label": "Profit",  "value": 21,  "target": 26,  "ranges": [12, 20, 30] }
] }
```

Exec KPI scorecards, budget-vs-actual for finance digests, quota attainment for sales, SLA-vs-goal for status reports.

### Try it

It's under Data in the editor palette, with a live playground on the [bullet component page](/components/bullet).