FusionCharts - Horizontal Bullet Customization

by Gagan Sikri

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.powercharts.js?cacheBust=56"></script>
<div id="chart-container">Chart will render here!</div>

JavaScript

FusionCharts.ready(function() {
	var hbulletchart=new FusionCharts({
    	"type": "hbullet",
        "renderAt": "chart-container",
        "width": "250",
        "height": "45",
        "dataFormat": "json",
        "dataSource": {
            "chart": {
                "showValue": "1",
                "bgAlpha": "0",
                "showBorder": "0",
                "lowerlimit": "0",
                "upperlimit": "100",
                "numbersuffix": "%",
                "baseFontSize": "13",
                "canvasPadding": "0",
                //Will change the color of Plor
                "plotFillColor": "#ffb327",
                //Will change the color of Base Font - Value(67%)
                "baseFontColor": "#ffb327",
                "canvasRightMargin": "40",
                "showTickMarks": '0',
                "showTickValues": '0'
            },
            
            "annotations": {
                "groups": [
                    {
                        "id": "Grp2",
                        "items": [
                            {
                                "type": "rectangle",
                                "x": "$gaugeStartX",
                                //to align with value of Plot.
                                "y": "$gaugeStartY + 9", 
                                "tox": "$gaugeEndX",
                                //to align with value of Plot.
                                "toy": "$gaugeEndY - 9", 
                                "radius": "3",
                                "alpha": "50",
                                //set background color to gray
                                "fillColor": "#dce0e5"
                            }
                        ]
                    }
                ]
            },
            "value": "67"
        }
    }).render();    
});