Loading

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:

FusionCharts will load here..

Given below is a brief description of the attributes used to customize plot and target color properties:

Attribute Name Description

plotFillColor

It is used to specify the hex code for the fill color for the plot bar, e.g. #23ACB5.

plotFillAlpha

It is used to specify the transparency for the plot bar. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 20.

targetColor

It is used to specify the hex code for the color used to render the target line, e.g. #FFFFFF.

targetThickness

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" }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attributes used to customize plot and target border properties:

Attribute Name Description

showPlotBorder

It is used to specify whether a border will be shown for the plot bar. Setting this attribute to 1 will show the plot border, setting it to 0 (default) will hide it.

plotBorderColor

It is used to specify the hex code of the plot border color, e.g. #456ADC.

plotBorderThickness

It is used to specify the thickness, in pixels, for the plot border, e.g. 4.

plotBorderAlpha

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" }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attributes used to customize the plot and target height:

Attribute Name Description

plotfillpercent

It is used to specify the percentage of color range that the plot fill bar will occupy.

targetFillPercent

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" }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attributes used to configure the color properties for the color range:

Attribute Name Description

colorRangeFillMix

It is used to specify the gradient fill formula for the color range, e.g. {light-10}, {light-70}, {dark-10}.

colorRangeFillRatio

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.

showColorRangeBorder

It is used to specify whether a border will be shown for the color range. Setting this attribute to 1 will show the border, setting it to 0 (default) will hide it.

colorRangeBorderColor

It is used to specify the hex code for the border color for the color range, e.g. #444444.

colorRangeBorderThickness

It is used to specify the thickness, in pixels, for the color range border, e.g. 3.

colorRangeBorderAlpha

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" }
{
    "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:

FusionCharts will load here..

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

showShadow

It is used to specify whether shadow effects will be enabled for the color range. Setting this attribute to 1 will enable the shadow effect, setting it to 0 (default) will disable it.

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" }
{
    "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:

FusionCharts will load here..

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

showTickMarks

It is used to specify whether tick marks will be shown for the graph. Setting this attribute to 0 hides the tick marks, setting it to 1 (default) shows them.

showTickValues

It is used to specify whether tick values will be shown for the graph. Setting this attribute to 0 hides the tick values, setting it to 1 (default) shows them.

ticksBelowGraph

It is used to specify whether the tick marks and tick values will be shown above or below the graph. Setting this attribute to 0 will render the tick marks and values above the graph, setting it to 1 (default) will render them below the graph.

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" }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attributes used to customize the tick marks:

Attribute Name Description

majorTMNumber

It is used to specify the number of major tick marks to be rendered.

minorTMNumber

It is used to specify the number of minor tick marks to be rendered.

majorTMColor

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.

majorTMAlpha

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.

majorTMHeight

It is used to specify the height of the major tick marks, e.g. 15.

majorTMThickness

It is used to specify the thickness of the major tick marks, e.g. 2.

minorTMColor

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.

minorTMAlpha

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.

minorTMHeight

It is used to specify the height of the minor tick marks, e.g. 12.

minorTMThickness

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" }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attribute used to show a dot instead of the filled bar:

Attribute Name Description

plotAsDot

It is used to specify whether a dot will be shown as the plot instead of the filled bar. Setting this attribute to 1 will render a dot as the plot, setting it to 0 (default) will render a filled bar.

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" }
{
    "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:

FusionCharts will load here..

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

showValue

It is used to specify whether the chart value will be shown. Setting this attribute to 0 will hide the value, setting it to 1 (default) will show the value.

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" }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attributes used to enable and configure the hover effect:

Attribute Name Description

showHoverEffect

It is used to specify whether the hover effect will be configured for the chart elements. Setting this attribute to 1 enables the hover effects, setting it to 0 (default) disables them.

targetHoverColor

It is used to specify the hex code for the target line color when the mouse pointer is hovered over it, e.g. #234ACD.

targetHoverAlpha

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.

targetHoverThickness

It is used to specify the thickness of the target line when the mouse pointer is hovered over it, e.g. 5.

showPlotBorderOnHover

It is used to specify whether the plot border will be shown when the mouse pointer is hovered over it. Setting this attribute to 1 will show the plot border on hover, setting it 0 will not.

<p class="text-info">If you set the showPlotBorder attribute to 0 but configure the other hover properties for the plot border, the border is still rendered.
</p>

plotBorderHoverColor

It is used to specify the hex code for the plot border when the mouse pointer is hovered over it, e.g. #34ACDB.

plotBorderHoverAlpha

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.

plotBorderHoverThickness

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" }
{
    "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.

Top