> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# Bullet chart

> Compare measures against targets using the BulletChart component.

API reference: [BulletChart()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.bulletchart/index.md) (function), [IBulletChartProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartprops/index.md) (interface)

A **bullet chart** is a variation of a bar chart that displays performance of a measure (primary measure) and its progress towards a goal (target measure). Optionally, the primary measure can also be compared to another measure (comparative measure). Use it to track results against a goal, for example, actual sales against the sales target.

![Bullet chart with a primary measure bar, a target marker, and a comparative gray bar for each location resort](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/bullet_chart.png)

## [Buckets](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/bullet-chart/#buckets)

| Prop | Required | Takes | What it does |
| --- | --- | --- | --- |
| `primaryMeasure` | Yes | One measure | Draws the primary bar. |
| `targetMeasure` | No | One measure | Draws the target value as a thick line to reach. Empty target values aren't drawn. |
| `comparativeMeasure` | No | One measure | Draws a secondary bar to compare the primary measure against. |
| `viewBy` | No | One or two attributes | Draws one bullet per attribute value along the Y axis. With two attributes, the values of the second attribute are grouped under each value of the first. Extra attributes are ignored. |
| `filters` | No | Filters | Limits the data the bullet chart shows. |

## [Sorting](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/bullet-chart/#sorting)

[`BulletChart`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.bulletchart/index.md) applies no default sorting. To sort the data, pass sort items in the `sortBy` prop. See [Sort items](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/execution/execution-model/index.md#sort-items).

## [Configuration](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/bullet-chart/#configuration)

Pass these options in the `config` prop. See [Chart configuration](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/chart-config/index.md) for details.

| Option | What it changes |
| --- | --- |
| `colors`, `colorPalette`, `colorMapping` | Colors of the measures. See [Colors](#colors). |
| `legend` | Whether the legend shows and where. |
| `xaxis`, `yaxis` | Visibility, labels, rotation, and name of the axes. `xaxis` is the horizontal value axis, where `min` and `max` set the scale. `yaxis` is the vertical axis with the `viewBy` values. |
| `enableJoinedAttributeAxisName` | With two `viewBy` attributes, their axis has no name by default. This option shows the attribute names joined by `›` as the name. |
| `grid` | `enabled` shows or hides the grid lines. |
| `chartFill` | `type` sets how bars are filled: `"solid"`, `"pattern"`, or `"outline"`. |
| `separators` | Thousands and decimal separators in the number format. |
| `zoomInsight` | Lets users zoom and pan along the axis with the `viewBy` values. |
| `enableCompactSize` | Hides axis labels and names when the chart is too small for them. Has no effect when `zoomInsight` is on. |

### [Colors](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/bullet-chart/#colors)

To appropriately visualize the displayed data, bullet charts use colors provided by a color array or a palette in the [config](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/chart-config/index.md#configure-colors) in the following way:
* For the **primary** measure, the first color from the color array/palette is used.
* For the **target** measure, a darker shade of the first color is used.
* For the **comparative** measure, gray is used.

To override the default coloring scheme and set a custom color for each measure, use [color mapping](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/chart-config/index.md#color-mapping).

## [Limits](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/bullet-chart/#limits)

- A bullet chart renders up to 10,000 bullets. With more, the chart shows an error and `onError` receives a [`DataTooLargeToDisplaySdkError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.datatoolargetodisplaysdkerror/index.md). Filter the data to fit.
- [`BulletChart`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.bulletchart/index.md) doesn't show measures in % (`computeRatio`). It turns `computeRatio` off on all three measures.

## [Structure](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/bullet-chart/#structure)

```tsx
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { BulletChart } from "@gooddata/sdk-ui-charts";

<BulletChart
    primaryMeasure={<primaryMeasure>}
    targetMeasure={<targetMeasure>}
    comparativeMeasure={<comparativeMeasure>}
    config={<chart-config>}
    …
/>
```

## [Example](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/bullet-chart/#example)

```tsx
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { BulletChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <BulletChart
        primaryMeasure={Md.$FranchiseFeesAdRoyalty}
        targetMeasure={Md.$FranchiseFees}
        comparativeMeasure={Md.$FranchiseFeesOngoingRoyalty}
        viewBy={Md.LocationResort}
    />
</div>
```

## [Props](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/bullet-chart/#props)

| Prop | Type | Required | Description | Inherited from |
|------|------|----------|-------------|----------------|
| [`primaryMeasure`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md#ibulletchartbucketpropsprimarymeasure) | [`AttributeMeasureOrPlaceholder`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributemeasureorplaceholder/index.md) | Yes | Specify primary measure. This will be charted as the primary bar. | [`IBulletChartBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md) |
| [`backend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibucketchartprops/index.md#ibucketchartpropsbackend) | [`IAnalyticalBackend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-backend-spi/sdk-backend-spi.ianalyticalbackend/index.md) | No | Analytical backend, from which the chart will obtain data to visualize If you do not specify instance of analytical backend using this prop, then you MUST have BackendProvider up in the component tree. | [`IBucketChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibucketchartprops/index.md) |
| [`comparativeMeasure`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md#ibulletchartbucketpropscomparativemeasure) | [`AttributeMeasureOrPlaceholder`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributemeasureorplaceholder/index.md) | No | Specify measure to use for comparison. This will be charted as the secondary bar. | [`IBulletChartBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md) |
| [`config`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md#icommonchartpropsconfig) | [`IChartConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ichartconfig/index.md) | No | Configure chart's behavior and appearance. | [`ICommonChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md) |
| [`drillableItems`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropsdrillableitems) | [`ExplicitDrill`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.explicitdrill/index.md)`[]` | No | Configure drillability; e.g. which parts of the visualization can be interacted with. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`ErrorComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropserrorcomponent) | `ComponentType<`[`IErrorProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md)`>` | No | React component to display in the event when there is an error with either obtaining the data from backend or with the data itself. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`execConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md#icommonchartpropsexecconfig) | [`IExecutionConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.iexecutionconfig/index.md) | No | Execution configuration, will provide the execution with necessary config before initiating execution. | [`ICommonChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md) |
| [`exportTitle`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropsexporttitle) | `string` | No | Set title to use for exported files. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`filters`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md#ibulletchartbucketpropsfilters) | [`NullableFiltersOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.nullablefiltersorplaceholders/index.md) | No | Specify filters to apply on the data to chart. | [`IBulletChartBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md) |
| [`height`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md#icommonchartpropsheight) | `number` | No | Set height of the chart (in pixels). | [`ICommonChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md) |
| [`LoadingComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropsloadingcomponent) | `ComponentType<`[`ILoadingProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md)`>` | No | React component to display while loading data from the backend. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`locale`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropslocale) | `string` | No | Set Locale for visualization localization. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`onDataView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksondataview) | [`OnDataView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ondataview/index.md) | No | _(Alpha)_ Called when the visualization loads a DataView, i.e. it receives data from the backend. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onDrill`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksondrill) | [`OnFiredDrillEvent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onfireddrillevent/index.md) | No | Called when user triggers a drill on a visualization. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonerror) | [`OnError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onerror/index.md) | No | Called when an error occurs while loading data for the visualization. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onExportReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonexportready) | [`OnExportReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onexportready/index.md) | No | Called when the visualization is ready to be exported. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onLegendReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ichartcallbacks/index.md#ichartcallbacksonlegendready) | [`OnLegendReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.onlegendready/index.md) | No | Called when legend is rendered. | [`IChartCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ichartcallbacks/index.md) |
| [`onLoadingChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonloadingchanged) | [`OnLoadingChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onloadingchanged/index.md) | No | Called when loading status of the visualization changes - vis starts or stops loading | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`placeholdersResolutionContext`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md#ibulletchartbucketpropsplaceholdersresolutioncontext) | `any` | No | Resolution context for composed placeholders. | [`IBulletChartBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md) |
| [`sortBy`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md#ibulletchartbucketpropssortby) | [`SortsOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.sortsorplaceholders/index.md) | No | Specify how to sort the data to chart. | [`IBulletChartBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md) |
| [`targetMeasure`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md#ibulletchartbucketpropstargetmeasure) | [`AttributeMeasureOrPlaceholder`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributemeasureorplaceholder/index.md) | No | Specify measure which contains the target/goal value. The value will be charted as the thick line to reach. | [`IBulletChartBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md) |
| [`viewBy`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md#ibulletchartbucketpropsviewby) | [`AttributeOrPlaceholder`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributeorplaceholder/index.md) `\|` [`AttributesOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributesorplaceholders/index.md) | No | Specify one or two attributes to use for slicing the measures. | [`IBulletChartBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibulletchartbucketprops/index.md) |
| [`width`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md#icommonchartpropswidth) | `number` | No | Set width of the chart (in pixels). | [`ICommonChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md) |
| [`workspace`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibucketchartprops/index.md#ibucketchartpropsworkspace) | `string` | No | Identifier of analytical workspace, from which the chart will obtain data to visualize. If you do not specify workspace identifier, then you MUST have WorkspaceProvider up in the component tree. | [`IBucketChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibucketchartprops/index.md) |