Bullet chart

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.

Buckets

Sorting

BulletChart applies no default sorting. To sort the data, pass sort items in the sortBy prop. See Sort items.

Configuration

Pass these options in the config prop. See Chart configuration for details.

Colors

To appropriately visualize the displayed data, bullet charts use colors provided by a color array or a palette in the config 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.

Limits

• A bullet chart renders up to 10,000 bullets. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.
• BulletChart doesn’t show measures in % (computeRatio). It turns computeRatio off on all three measures.

Structure

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

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