HBullet charts with different values has different size. and value is not vertically centered

Recommended Posts



First take a look at the charts in the screenshot , you will notice that their sizes are different ( <-- bad for me)


I noticed that a bullet chart with value = 100 will display a smaller chart than a chart with value 90, apparently because the "100" string take more spaces and the "90" chart will be smaller than a value= "3"


Here is my code:

        chartData = {
            "chart": {
                "bgAlpha": "0",
                "showBorder": "0",
                "lowerlimit": "0",
                "upperlimit": "100",
                "numbersuffix": "%",
                "animation": "1",
                "plotfillcolor": fillColor,

                "showTickMarks": '0',
                "showTickValues" : '0'
            "colorrange": {
                "color": [
                        "minvalue": "0",
                        "maxvalue": "100",
                        "alpha": "0"
            "annotations": {
                "groups": [
                        "id": "Grp2",
                        "showbelow": "1",
                        "items": [
                                "type": "rectangle",
                                "x": "$gaugeStartX",
                                "y": "$gaugeStartY",
                                "tox": "$gaugeEndX",
                                "toy": "$gaugeEndY",
                                "alpha": "0",
                                "showBorder": "1",
                                "borderAlpha": "100",
                                "borderColor": fillColor
            "value": scope.value

        chartReference = new FusionCharts("HBullet", genChartId, placeHolderWidth, placeHolderHeight, "0", "0");

How can I make them all take the same space ?


Its important for me to display the value at the left side of the chart, and it should be vertically centered <-- how can I make vertically centered? because right now it is not which doesn't look so good



Thanks ahead,




Share this post

Link to post
Share on other sites
Guest Sashibhusan



Since the chart dimension is having fixed width, to adjust the data values (100%) the canvas will be auto resized, which is why the bar width will be decreased, as compared to value "15".


However, you can forcefully set the canvas width by setting "canvasRightMargin" attribute to some fixed pixel values.


In your chart JSON data, I have set this attribute value to "40" and rendered the chart in dimension (200 px X 30 Px) and the screen shot is as below.


Also, regarding your issue of vertical alignment of labels, we are not able to replicate this issue using latest FusionCharts Suite XT V3.4. could you please let us know the exact version of PowerCharts XT you are using in your application?


Awaiting your valuable response.




Share this post

Link to post
Share on other sites

The canvasRightMargin did the trick, thanks!


Where can I get the latest FusionCharts Suite XT version (currently using the 3.2.4-sr1.9888) ? Our Account Manager at FusionCharts doesn't seems to respond via email...

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now