Bullet component
Datatype: "bullet"A bullet chart — a measure bar against a target marker over qualitative range bands. The compact, dashboard-friendly way to show actual vs target for KPIs.
Design JSON
{
"title": "Bullet sample",
"description": "A KPI actual-vs-target scorecard",
"dimensions": {
"width": 800,
"height": 420
},
"background": {
"color": "#ffffff"
},
"components": [
{
"id": "sample-bullet",
"key": "bullet",
"type": "bullet",
"position": {
"x": 170,
"y": 110
},
"rotation": 0,
"size": {
"width": 460,
"height": 200
},
"dynamic": true,
"properties": {
"data": [
{
"label": "Revenue",
"value": 268,
"target": 250,
"ranges": [
150,
225,
300
]
},
{
"label": "Profit",
"value": 21,
"target": 26,
"ranges": [
12,
20,
30
]
},
{
"label": "Orders",
"value": 1320,
"target": 1500,
"ranges": [
800,
1200,
1600
]
}
],
"measureColor": "#2563eb",
"targetColor": "#0f172a",
"showValues": true,
"showTarget": true,
"valueFormat": "number",
"opacity": 1
}
}
]
}Like what you built? The full editor — canvas, templates and the render API — is free to start.
Open the editorBullet examples
Real renders of the bullet — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
KPI scorecard
Revenue, profit and orders against target with poor/ok/good bands.
API overrides for this example
{
"bullet.data": [
{
"label": "Revenue",
"value": 268,
"target": 250,
"ranges": [
150,
225,
300
]
},
{
"label": "Profit",
"value": 21,
"target": 26,
"ranges": [
12,
20,
30
]
},
{
"label": "Orders",
"value": 1320,
"target": 1500,
"ranges": [
800,
1200,
1600
]
}
],
"bullet.showValues": true,
"bullet.showTarget": true
}Budget vs actual
Departmental spend against budget, formatted as currency.
API overrides for this example
{
"bullet.data": [
{
"label": "Eng",
"value": 82000,
"target": 90000,
"ranges": [
50000,
80000,
100000
]
},
{
"label": "Sales",
"value": 61000,
"target": 55000,
"ranges": [
30000,
50000,
70000
]
},
{
"label": "Ops",
"value": 24000,
"target": 30000,
"ranges": [
15000,
25000,
35000
]
}
],
"bullet.measureColor": "#0891b2",
"bullet.valueFormat": "compact",
"bullet.currencySymbol": "$"
}All bullet styles
Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.
Use cases
What developers typically build with the bullet component.
- KPI scorecards (actual vs target) for exec dashboards
- Budget vs actual spend graphics for finance digests
- Quota attainment cards for sales teams
- SLA / performance-against-goal visuals for status reports
Use it dynamically via the API
Push fresh rows per render with '<key>.data' (or just '<key>') as [{ label, value, target, ranges }]; the target marker and bands update with them.
Full API request with the sample design's current values — the playground above sends only the properties you change
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
"bullet.data": [
{
"label": "Revenue",
"value": 268,
"target": 250,
"ranges": [
150,
225,
300
]
},
{
"label": "Profit",
"value": 21,
"target": 26,
"ranges": [
12,
20,
30
]
},
{
"label": "Orders",
"value": 1320,
"target": 1500,
"ranges": [
800,
1200,
1600
]
}
],
"bullet.measureColor": "#2563eb",
"bullet.targetColor": "#0f172a",
"bullet.showValues": true,
"bullet.showTarget": true,
"bullet.valueFormat": "number",
"bullet.opacity": 1
}'Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.
Property reference
Every property the bullet component accepts — in the editor, in design JSON, and as API overrides.
| Property | Type | Edits as | Default | Description |
|---|---|---|---|---|
| data | object[] | text | [] | Rows top→bottom: array of { label, value, target, max?, ranges? }. |
| max | number | 0 | 0 | Global scale max when a row omits its own max (0 = auto). |
| ranges | number[] | text | [] | Global band thresholds (ascending) when a row omits its own ranges. |
| measureColor | color | #2563eb | "#2563eb" | The measure bar color. |
| targetColor | color | #0f172a | "#0f172a" | The target marker color. |
| rangeColor | color | #64748b | "#64748b" | Base color for the graded qualitative bands. |
| labelColor | color | #334155 | "#334155" | Row label text color. |
| valueColor | color | #0f172a | "#0f172a" | Value text color. |
| showValues | boolean | true | true | Print the measure value beside each bar. |
| showTarget | boolean | true | true | Draw the target marker. |
| valueFormat | 'number' | 'compact' | 'percent' | 'currency' | numbercompactpercentcurrency | "number" | How values are formatted (1,200 / 1.2K / 12% / $1,200). |
| currencySymbol | string | text | "$" | Symbol used with the 'currency' format. |
| gap | number | 12 | 12 | Gap between rows (px). |
| opacity | number | 1 | 1 | Overall component opacity from 0 (transparent) to 1 (opaque). |
| borderWidth | number | 0 | 0 | Border thickness in pixels around the component. |
| borderColor | color | transparent | "transparent" | Border color (any CSS color). |
| borderStyle | 'solid' | 'dashed' | 'dotted' | 'double' | 'none' | soliddasheddotteddoublenone | "solid" | Border line style. |
| borderRadius | number | 0 | 0 | Corner radius in pixels. |
| boxShadow | string | text | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". |