As an example, we will create a bullet graph to show last monthâ€™s revenue, where the actual revenue will be plotted against the target revenue.

A horizontal bullet graph to plot the actual revenue and the target revenue looks like this:

To create a bullet graph, you will need to:

• Define the upper and lower limits (also known as the maximum and minimum values) for the chart.

• Divide the specified limits into the qualitative ranges of performance - poor, satisfactory, and good and define the data for the graph. For our example, we will use the data shown in the table below:

Range What it means? Color

0-50k

Poor

Light Red

50k-75k

Moderate

Light Yellow

75k-100k

Good

Light Green

• Define the actual and target value. For our example, we will set the actual value to \$82K and the target value to \$90K.

The data structure needed to create the bullet graph to plot the actual revenue against the target revenue is given below:

{ "chart": { "theme": "fint", "lowerLimit": "0", "subCaptionFontSize": "11", "upperLimit": "120", "caption": "Last Month Revenue", "subcaption": "Actual vs Target (Bakersfield Central)", "numberPrefix": "\$", "numberSuffix": "K", "chartBottomMargin": "25" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00", "alpha": "25" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19", "alpha": "25" }, { "minValue": "75", "maxValue": "120", "code": "#6baa01", "alpha": "25" } ] }, "value": "82", "target": "90" }
``````{
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "\$",
"numberSuffix": "K",
"chartBottomMargin": "25"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
},
{
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}
]
},
"value": "82",
"target": "90"
}``````

To render the above chart as a vertical bullet graph, change the value of the `type` attribute to `vBullet`.

There! You have now seen how you can create a simple bullet graph.

Top