Bullet
Compare actual values with explicit targets.
Chart ID: bullet. Independent import: @revolist/charts/bullet.
Live example
Section titled “Live example”Loading chart…
Reading the chart
Section titled “Reading the chart”Compare an actual result with a target in a compact horizontal layout. The bar shows actual performance and the separate marker shows its benchmark.
Data requirements
Section titled “Data requirements”Bind actual and target to stable numeric series IDs. The chart compares supplied results with supplied benchmarks; it does not calculate targets from other observations.
The roles below describe the chart's data contract. Generic category/value roles resolve from the dataset; explicitly bind specialized numeric roles as shown in the complete example.
| Data role | Field count |
|---|---|
category | 1 or more |
actual | 1 |
target | 1 |
Download the complete sample data and settings (JSON). See Data & Configuration for mapping, null values, updates and lifecycle rules.
Create this chart
Section titled “Create this chart”Install the package using the installation guide, give the host an explicit height, and call createBulletChart after the host mounts. This factory fixes the chart type to bullet.
<div id="chart" style="width: 100%; height: 450px;"></div>Complete runnable TypeScript example with sample data
import { createBulletChart } from '@revolist/charts/bullet';
const container = document.getElementById('chart')!;const chart = await createBulletChart({ container, "dataset": { "revision": 0, "source": "client", "categories": [ { "id": "preview-category-0", "label": "Revenue", "path": [ "Revenue" ], "labels": [ "Revenue" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-1", "label": "Margin", "path": [ "Margin" ], "labels": [ "Margin" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-2", "label": "Retention", "path": [ "Retention" ], "labels": [ "Retention" ], "depth": 1, "kind": "leaf" } ], "series": [ { "id": "preview-series-0", "label": "Actual", "columnPath": [ "Actual" ], "labels": [ "Actual" ], "kind": "leaf", "prop": "preview-0" }, { "id": "preview-series-1", "label": "Target", "columnPath": [ "Target" ], "labels": [ "Target" ], "kind": "leaf", "prop": "preview-1" } ], "values": [ [ 72, 80 ], [ 58, 65 ], [ 84, 82 ] ], "analyticalFrame": { "fields": [ { "id": "pivot:category", "label": "pivot:category", "role": "dimension", "semanticType": "category" }, { "id": "pivot:series", "label": "pivot:series", "role": "dimension", "semanticType": "category" }, { "id": "preview-series-0", "label": "Actual", "role": "measure", "semanticType": "number", "sourceField": "preview-0" }, { "id": "preview-series-1", "label": "Target", "role": "measure", "semanticType": "number", "sourceField": "preview-1" } ], "observations": [ { "id": "[\"preview-category-0\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Revenue", "label": "Revenue", "path": [ "Revenue" ], "labels": [ "Revenue" ] }, "pivot:series": { "value": "Actual", "label": "Actual", "path": [ "Actual" ], "labels": [ "Actual" ] } }, "measures": { "preview-series-0": 72 } }, { "id": "[\"preview-category-0\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Revenue", "label": "Revenue", "path": [ "Revenue" ], "labels": [ "Revenue" ] }, "pivot:series": { "value": "Target", "label": "Target", "path": [ "Target" ], "labels": [ "Target" ] } }, "measures": { "preview-series-1": 80 } }, { "id": "[\"preview-category-1\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Margin", "label": "Margin", "path": [ "Margin" ], "labels": [ "Margin" ] }, "pivot:series": { "value": "Actual", "label": "Actual", "path": [ "Actual" ], "labels": [ "Actual" ] } }, "measures": { "preview-series-0": 58 } }, { "id": "[\"preview-category-1\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Margin", "label": "Margin", "path": [ "Margin" ], "labels": [ "Margin" ] }, "pivot:series": { "value": "Target", "label": "Target", "path": [ "Target" ], "labels": [ "Target" ] } }, "measures": { "preview-series-1": 65 } }, { "id": "[\"preview-category-2\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Retention", "label": "Retention", "path": [ "Retention" ], "labels": [ "Retention" ] }, "pivot:series": { "value": "Actual", "label": "Actual", "path": [ "Actual" ], "labels": [ "Actual" ] } }, "measures": { "preview-series-0": 84 } }, { "id": "[\"preview-category-2\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Retention", "label": "Retention", "path": [ "Retention" ], "labels": [ "Retention" ] }, "pivot:series": { "value": "Target", "label": "Target", "path": [ "Target" ], "labels": [ "Target" ] } }, "measures": { "preview-series-1": 82 } } ], "matrixCells": [ { "categoryId": "preview-category-0", "seriesId": "preview-series-0", "observationId": "[\"preview-category-0\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-0", "seriesId": "preview-series-1", "observationId": "[\"preview-category-0\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-0", "observationId": "[\"preview-category-1\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-1", "observationId": "[\"preview-category-1\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-0", "observationId": "[\"preview-category-2\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-1", "observationId": "[\"preview-category-2\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" } ] } }, "bindings": { "actual": [ "preview-series-0" ], "target": [ "preview-series-1" ] }, "presentation": { "dataLabels": false }});
// When the host unmounts:// chart.destroy();Await updates before reading a snapshot or exporting. Call chart.destroy() when the host unmounts. See the live catalog to interact with this type.
Supported options
Section titled “Supported options”Set these fields in chartOptions. The option schema validates supported keys, ranges and choices; updating chartOptions replaces that authored object.
| Option | Default | Accepted values |
|---|---|---|
showGridLines | true | true or false |
markOpacity | 1 | 0.2 to 1; step 0.05 |
Titles, legends, theme and labels belong to presentation or the corresponding top-level setting. Axis, color, navigation and interaction support depends on the selected chart; see Data & Configuration.
Performance ranges and target variance
Section titled “Performance ranges and target variance”Use qualitative ranges to explain performance thresholds, and show the difference between the existing actual and target measures:
await chart.update({ chartType: 'bullet', bindings: { actual: ['actual'], target: ['target'] }, bullet: { minimum: 0, maximum: 120, ranges: [ { to: 50, label: 'Below target', color: '#dedee5' }, { to: 90, label: 'On track', color: '#b6a9ff' }, { to: 120, label: 'Strong', color: '#8971f5' }, ], showVariance: true, varianceFormat: 'percent', },});Replace actual and target with your dataset’s stable series IDs. Range upper
boundaries must be strictly increasing. The chart displays the range key and
actual/target context; authored bounds clip geometry without changing source
values. Percentage variance is undefined when the target is zero. Use
varianceFormat: 'absolute' when an absolute difference is more useful.
These settings work in standalone Charts and the native Pivot renderer. See Analysis for method choices and Chart Analysis API for the typed contract.
Related charts
Section titled “Related charts”- Gauge — Compare an actual value with its target on a radial scale.
- KPI value — Summarize actual, target, and variance in a compact KPI card.
- Progress gauge — Show progress toward a target on a radial track.
- Linear gauge — Compare a value with an explicit linear scale and target.