Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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..
{ "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"
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hbullet',
    renderAt: 'chart-container',
    width: '500',
    height: '90',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "lowerLimit": "0",
            "subCaptionFontSize": "11",
            "upperLimit": "120",
            "caption": "Last Month Revenue",
            "subcaption": "Actual vs Target (Bakersfield Central)",
            "numberPrefix": "$",
            "numberSuffix": "K",
            "chartBottomMargin": "25",
            //Configuring plot fill color
            "plotFillColor": "#5b0101",
            //Configuring plot transparenct (alpha)
            "plotFillAlpha": "90",
            //Configuring target color
            "targetColor": "#5b0101",
            //Configuring target thickness
            "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"
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Customizing Border Cosmetics

A bullet graph with the border properties customized looks like this:

FusionCharts will load here..
{ "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"
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hbullet',
    renderAt: 'chart-container',
    width: '500',
    height: '90',
    dataFormat: 'json',
    dataSource: {
        "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"
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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..
{ "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"
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hbullet',
    renderAt: 'chart-container',
    width: '500',
    height: '90',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "lowerLimit": "0",
            "subCaptionFontSize": "11",
            "upperLimit": "120",
            "caption": "Last Month Revenue",
            "subcaption": "Actual vs Target (Bakersfield Central)",
            "numberPrefix": "$",
            "numberSuffix": "K",
            "chartBottomMargin": "25",
            // Percent of width occupied by the plot
            "plotfillpercent": "30",
            // Percent of canvas width occupied by target bar
            "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"
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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..
{ "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"
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hbullet',
    renderAt: 'chart-container',
    width: '500',
    height: '90',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "lowerLimit": "0",
            "subCaptionFontSize": "11",
            "upperLimit": "120",
            "caption": "Last Month Revenue",
            "subcaption": "Actual vs Target (Bakersfield Central)",
            "numberPrefix": "$",
            "numberSuffix": "K",
            "chartBottomMargin": "25",
            //Defining color range fill mix formula
            "colorRangeFillMix": "{light-10},{light-70},{dark-10}",
            //Defining color range fill ratio
            "colorRangeFillRatio": "10,70,20",
            //Showing color range borders
            "showColorRangeBorder": "1",
            //Customizing color range borders (Color, Thickness and Alpha)
            "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"
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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..
{ "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"
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hbullet',
    renderAt: 'chart-container',
    width: '500',
    height: '90',
    dataFormat: 'json',
    dataSource: {
        "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"
    },

    events: {
        'beforeRender': function(event, args) {
            var container = document.createElement("div"),
                sender = event.sender;

            container.setAttribute("id", "checkbox-container");
            container.innerHTML = '<input type="checkbox" id="showShadow">Show Shadow?</input>';

            args.container.parentNode.insertBefore(container, args.container.nextSibling);

            var showShadowCB = document.getElementById("showShadow");

            //Function to show/hide value
            function toggleShadow(evt, obj) {
                //Using showValue attribute to show hide chart value
                if (showShadowCB.checked) {
                    sender.setChartAttribute('showShadow', 1);
                } else {
                    sender.setChartAttribute('showShadow', 0);
                }
            }

            //Set event listener for check boxes
            showShadowCB.addEventListener && showShadowCB.addEventListener("click", toggleShadow);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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..
{ "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"
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hbullet',
    renderAt: 'chart-container',
    width: '500',
    height: '90',
    dataFormat: 'json',
    dataSource: {
        "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"
    },

    events: {
        'beforeRender': function(event, args) {
            var container = document.createElement("div"),
                sender = event.sender;

            container.setAttribute("id", "checkbox-container");
            container.innerHTML = '<input type="checkbox" id="tmCB" checked>Show Tick Mark?</input><input type="checkbox" id="tvCB" checked>Show Tick Value?</input><input type="checkbox" id="tpCB">Tick On Top?</input>';

            args.container.parentNode.insertBefore(container, args.container.nextSibling);

            var tickmarkCB = document.getElementById("tmCB"),
                tickvalueCB = document.getElementById("tvCB"),
                tickposCB = document.getElementById("tpCB");

            //Function to show/hide tick mark
            function showTickMark(evt, obj) {
                //Using showTickMarks attribute to show/hide ticks
                (tickmarkCB.checked) ? sender.setChartAttribute('showTickMarks', 1) :
                    sender.setChartAttribute('showTickMarks', 0);

            }

            //Function to show/hide tick value
            function showTickValue(evt, obj) {
                //Using showTickValues attribute to show/hide tick value
                (tickvalueCB.checked) ? sender.setChartAttribute('showTickValues', 1) :
                    sender.setChartAttribute('showTickValues', 0);
            }

            //Function to show/hide tick value
            function toggleTickPos(evt, obj) {
                //Using showTickValues attribute to set tick position
                (tickposCB.checked) ? sender.setChartAttribute('ticksBelowGraph', 0) :
                    sender.setChartAttribute('ticksBelowGraph', 1);
            }

            //Set event listener for check boxes and radio buttons
            tickmarkCB.addEventListener && tickmarkCB.addEventListener("click", showTickMark);
            tickvalueCB.addEventListener && tickvalueCB.addEventListener("click", showTickValue);
            tickposCB.addEventListener && tickposCB.addEventListener("click", toggleTickPos);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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..
{ "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"
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hbullet',
    renderAt: 'chart-container',
    width: '500',
    height: '90',
    dataFormat: 'json',
    dataSource: {
        "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",
            //Configuring tick marks cosmetics
            "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"
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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..
{ "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"
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hbullet',
    renderAt: 'chart-container',
    width: '500',
    height: '90',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "lowerLimit": "0",
            "subCaptionFontSize": "11",
            "upperLimit": "120",
            "caption": "Last Month Revenue",
            "subcaption": "Actual vs Target (Bakersfield Central)",
            "numberPrefix": "$",
            "numberSuffix": "K",
            "chartBottomMargin": "25",
            //Configuring the plot to show as a dot
            "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"
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Showing/hiding Chart Value

A horizontal bullet graph with the chart value hidden looks like this:

FusionCharts will load here..
{ "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"
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hbullet',
    renderAt: 'chart-container',
    width: '500',
    height: '90',
    dataFormat: 'json',
    dataSource: {
        "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"
    },
    events: {
        beforeRender: function(event, args) {
            var container = document.createElement("div"),
                sender = event.sender;

            container.setAttribute("id", "checkbox-container");
            container.innerHTML = '<input type="checkbox" id="showVal" checked>Show Value?</input>';

            args.container.parentNode.insertBefore(container, args.container.nextSibling);

            var showValueCB = document.getElementById("showVal");

            //Function to show/hide value
            function showValue(evt, obj) {
                //Using showValue attribute to show hide chart value
                if (showVal.checked) {
                    sender.setChartAttribute('showValue', 1);
                } else {
                    sender.setChartAttribute('showValue', 0);
                }
            }

            //Set event listener for check boxes
            showValueCB.addEventListener && showValueCB.addEventListener("click", showValue);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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..
{ "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"
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hbullet',
    renderAt: 'chart-container',
    width: '500',
    height: '90',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "lowerLimit": "0",
            "subCaptionFontSize": "11",
            "upperLimit": "120",
            "caption": "Last Month Revenue",
            "subcaption": "Actual vs Target (Bakersfield Central)",
            "numberPrefix": "$",
            "numberSuffix": "K",
            "chartBottomMargin": "25",
            //Configuring hover effects
            "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"
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Top