Loading
Configuring Bullet Graph
FusionCharts Suite XT allows you to configure several cosmetic and functional properties for the bullet graphs.
In this section, you will be shown how you can:
-
Customize plot and target properties
-
Customize color range properties
-
Customize tick marks
-
Render a dot as the data plot
-
Show/hide the chart value
-
Configure hover effects
Customizing Plot and Target Properties
Customizing Color Properties
A bullet graph with the color properties customized looks like this:
Given below is a brief description of the attributes used to customize plot and target color properties:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code for the fill color for the plot bar, e.g. #23ACB5. |
|
It is used to specify the transparency for the plot bar. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 20. |
|
It is used to specify the hex code for the color used to render the target line, e.g. #FFFFFF. |
|
It is used to specify the thickness, in pixels, for the target line, e.g. 3. |
The data structure needed to customize the plot and target color properties 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",
"plotFillColor": "#5b0101",
"plotFillAlpha": "90",
"targetColor": "#5b0101",
"targetThickness": "4"
},
"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"
}Customizing Border Cosmetics
A bullet graph with the border properties customized looks like this:
Given below is a brief description of the attributes used to customize plot and target border properties:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether a border will be shown for the plot bar. Setting this attribute to |
|
It is used to specify the hex code of the plot border color, e.g. #456ADC. |
|
It is used to specify the thickness, in pixels, for the plot border, e.g. 4. |
|
It is used to specify the transparency for the plot border. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50. |
The data structure needed to customize the plot and target border properties for the bullet graph 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",
"showPlotBorder": "1",
"plotBorderColor": "#333333",
"plotBorderThickness": "1",
"plotBorderAlpha": "100"
},
"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"
}Customizing the Plot and Target Width and Height
By default, the chart automatically decides the width/height (width in case of a vertical bullet graph and height in case of the horizontal bullet graph) based on the data you provide. However, you can configure these manually.
A horizontal bullet graph with the height of the plot and target bar customized looks like this:
Given below is a brief description of the attributes used to customize the plot and target height:
| Attribute Name | Description |
|---|---|
|
It is used to specify the percentage of color range that the plot fill bar will occupy. |
|
It is used to specify the percentage of color range that the target fill bar will occupy. |
The data structure needed to configure the plot and target bar width for the bullet graph 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",
"plotfillpercent": "30",
"targetFillPercent": "30"
},
"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"
}Customizing Color Range Properties
Configuring Color
You can configure the color range to be filled with a gradient mix instead of a solid color.
A horizontal bullet graph configured for the color range properties looks like this:
Given below is a brief description of the attributes used to configure the color properties for the color range:
| Attribute Name | Description |
|---|---|
|
It is used to specify the gradient fill formula for the color range, e.g. {light-10}, {light-70}, {dark-10}. |
|
It is used to specify the ratio in which each color constituent in the gradient fill mix will be applied to the color range, e.g. 10, 70, 20. |
|
It is used to specify whether a border will be shown for the color range. Setting this attribute to |
|
It is used to specify the hex code for the border color for the color range, e.g. #444444. |
|
It is used to specify the thickness, in pixels, for the color range border, e.g. 3. |
|
It is used to specify the transparency of the color range border. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 100. |
The data structure needed to configure the color properties for the color range 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",
"colorRangeFillMix": "{light-10},{light-70},{dark-10}",
"colorRangeFillRatio": "10,70,20",
"showColorRangeBorder": "1",
"colorRangeBorderColor": "#CCCCCC",
"colorRangeBorderThickness": "1",
"colorRangeBorderAlpha": "100"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "50"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "50"
},
{
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "50"
}
]
},
"value": "82",
"target": "90"
}To render the bullet graph in 2D, set the colorRangeFillMix attribute to an empty value, like this "colorRangeFillMix": "".
Configuring Shadow
A horizontal bullet graph with the shadow effect enabled looks like this:
The above chart is rendered with a Show Shadow ? check box. Selecting this check box will enable the shadow effect for the bullet graph, deselecting it will disable the effect.
Given below is a brief description of the attribute used to enable the shadow effect:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether shadow effects will be enabled for the color range. Setting this attribute to |
The data structure needed to enable the shadow effect for the bullet graph is given below:
{
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"showShadow": "0",
"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"
}Customizing Tick Marks and Tick Values
Customizing Tick/Value Visibility and Positioning
In a horizontal bullet graph, by default, the tick marks are rendered below the graph; you can opt to render it above the graph. In a vertical bullet graph, by default, the tick marks are rendered on the right; you can opt to show them on the left. You can also opt to hide the tick marks and tick values.
A horizontal bullet graph with the tick/value visibility and positioning customized looks like this:
The above chart is rendered with three check boxes: “Show Tick Mark?” - Selecting it will show the tick marks, deselecting it will hide them, “Show Tick Value?” - Selecting it will show the tick values, deselecting it will hide them, “Tick on Top?” - Selecting it will show the tick marks above the graph, deselecting it will show them below.
Given below is a brief description of the attributes used to customize the tick/value visibility and positioning:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether tick marks will be shown for the graph. Setting this attribute to |
|
It is used to specify whether tick values will be shown for the graph. Setting this attribute to |
|
It is used to specify whether the tick marks and tick values will be shown above or below the graph. Setting this attribute to |
The data structure needed to customize the tick/value visibility and positioning 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",
"captionPadding": "7"
},
"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"
}Customizing the Number and Cosmetics of Major and Minor Tick Marks
By default, the number of major and minor tick marks is determined by the chart automatically based on the data provided by you.
A bullet graph with the number and cosmetics of major and minor tick marks customized looks like this:
Given below is a brief description of the attributes used to customize the tick marks:
| Attribute Name | Description |
|---|---|
|
It is used to specify the number of major tick marks to be rendered. |
|
It is used to specify the number of minor tick marks to be rendered. |
|
It is used to specify the hex code of the color using which the major tick marks will be rendered on the gauge, e.g. #333333. |
|
It is used to specify the transparency of the major tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 100. |
|
It is used to specify the height of the major tick marks, e.g. 15. |
|
It is used to specify the thickness of the major tick marks, e.g. 2. |
|
It is used to specify the hex code of the color using which the minor tick marks will be rendered on the gauge, e.g. #666666. |
|
It is used to specify the transparency of the minor tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 100. |
|
It is used to specify the height of the minor tick marks, e.g. 12. |
|
It is used to specify the thickness of the minor tick marks, e.g. 1. |
The data structure needed to customize the number and cosmetics of major and minor tick marks 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",
"minorTMNumber": "3",
"majorTMcolor": "#0075c2",
"majorTMalpha": "50",
"majorTMheight": "5",
"majorTMthickness": "2",
"minorTMcolor": "#0075c2",
"minorTMalpha": "50",
"minorTMheight": "2",
"minorTMThickness": "1"
},
"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"
}Rendering a Dot as the Plot Instead of a Filled Bar
A bullet graph rendered with a dot as the plot instead of the filled bar looks like this:
Given below is a brief description of the attribute used to show a dot instead of the filled bar:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether a dot will be shown as the plot instead of the filled bar. Setting this attribute to |
The data structure needed to render a dot instead of the filled bar 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",
"plotAsDot": "1"
},
"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"
}Showing/hiding Chart Value
A horizontal bullet graph with the chart value hidden looks like this:
The chart above is rendered with a Show Value? check box. Selecting this check box will show the chart value, deselecting it will hide the value.
Given below is a brief description of the attribute used to show/hide the data value:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the chart value will be shown. Setting this attribute to |
The data structure needed to show/hide the chart value 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"
}Configuring Hover Effects
You can use hover effects to improve the visual representation of your gauge.
A horizontal bullet graph with hover effects enabled looks like this:
Given below is a brief description of the attributes used to enable and configure the hover effect:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the hover effect will be configured for the chart elements. Setting this attribute to |
|
It is used to specify the hex code for the target line color when the mouse pointer is hovered over it, e.g. #234ACD. |
|
It specifies the transparency for the target line when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 55. |
|
It is used to specify the thickness of the target line when the mouse pointer is hovered over it, e.g. 5. |
|
It is used to specify whether the plot border will be shown when the mouse pointer is hovered over it. Setting this attribute to |
|
It is used to specify the hex code for the plot border when the mouse pointer is hovered over it, e.g. #34ACDB. |
|
It is used to specify the transparency for the plot border when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e. g. 100. |
|
It is used to specify the thickness for the plot border when the mouse pointer is hovered over it, e.g. 4. |
The data structure needed to configure hover effects for the bullet graphs 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",
"targetHoverColor": "#1aaf5d",
"targetHoverAlpha": "75",
"targetHoverThickness": "5",
"showPlotBorderOnHover": "1",
"plotBorderHoverColor": "#001421",
"plotBorderHoverAlpha": "75",
"plotBorderHoverThickness": "2"
},
"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"
}There! You have now seen how you can configure the various functional and cosmetic properties for bullet graphs.