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

[Vedmack]

Hi

 

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");
        chartReference.setJSONData(chartData);
        chartReference.setTransparent(true);
        chartReference.render(scope.chartWrapperId);

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,

 

Daniel.

[Guest Sashibhusan]

Hi,

 

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.

 

[Vedmack]

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...

[Swarnam]

Hey,

 

Glad to know our suggestion was helpful.

 

With regards to upgrade, please drop a mail to "[email protected]". One of our members from relevant department, will get in touch with you asap.