Sign in to follow this  

Annotation on Angular Gauge getting cutoff

Recommended Posts



Thank you for your patience.


Could you please upgrade your current version to the latest, i.e, FusionCharts Suite v3.6.0, that will resolve your reported issue of vertical centering of annotation texts.


You can check out this fiddle:


You can check with the version history from here:


Also, we have released updated plugins, wrappers and export handlers which can be checked from here:


To avail this licensed release, you would need to re-Download the entire package from the My Orders section of FusionCharts Product Update Center.


To download the Evaluation version of FusionCharts Suite XT v3.6.0, please visit the link:

Share this post

Link to post
Share on other sites
I am having problem with the Text Annotations  shifting right vs the gauge when the chart is rotated on device from portrait to landscape. I am running 3.6.0


Thanks for the help..


var gauge = {

    "type": "angulargauge",

    "renderAt": "container",

    "width": '100%',

    "height": 195,

    "dataFormat": "json",

    "dataSource": {

        "chart": {

            "id": 'myChartId',

            "exportEnabled": "0",

            "manageResize": "1",

            "bgColor": "#ffffff",

            "bgAlpha": "0",

            "outCnvbaseFontSize": "18",

            "outCnvbaseFontColor": "074A09",

            "upperLimit": "130",

            "lowerLimit": "0",

            "showLimits": "0",

            "lowerLimitDisplay": "",

            "upperLimitDisplay": "",

            "gaugeStartAngle": "180",

            "gaugeEndAngle": "0",

            //"bgImage": "Ragweed.jpg",

            "bgImageAlpha": "55",

            "bgImageDisplayMode": "fit",

            "gaugeFillMix": "{light-10},{light-20},{light-60},{dark-30},{dark-40}, {dark-40}",

            "gaugefillpattern": "linear",

            "gaugeBorderColor": "{dark-30}",

            "gaugeOuterRadius": "75",

            "gaugeInnerRadius": "50",

            "pivotRadius": "10",

            "showValue": "0",

            "tickValueStep": "5",

            "placeValuesInside": "1",

            "borderAlpha": "0",

            "canvasBorderAlpha": "0"


        "colorRange": {

            "color": [{

                "minValue": "0",

                "maxValue": "15",

                "code": "#96C900"

            }, {

                "minValue": "15",

                "maxValue": "65",

                "code": "#FFFB14"

            }, {

                "minValue": "65",

                "maxValue": "130",

                "code": "#C90000"



        "dials": {

            "dial": [{

                "value": "0",

                "tooltext": "Latest count",

                "rearExtension": "15",

                "radius": "66",

                "baseWidth": "12",

                "topWidth": "3",

                "bgColor": "210B02"



        "annotations": {

            "groups": [{

                "id": "Grp1",

                "x": "160",

                "y": "172",

                "autoscale": "1",


                "showBelow": "1",

                "alpha": "50",

                "items": [



                    "type": "arc",

                    "startAngle": "0",

                    "endAngle": "180",

                    "Alpha": "100",

                    "Color": "678000,FCEF27,E00000",

                    "fillpattern": "linear",

                    "fillratio": "25,35,40",

                    "showborder": "0",

                    "radius": "51",

                    "innerradius": "47"



            }, {

                "id": "Grp2",

                "items": [{

                    "type": "text",

                    "label": "LOW",

                    "font": "Verdana",


                    "x": "55",

                    "y": "105",

                    "align": "left",

                    "vAlign": "left",

                    "fontcolor": "01701D",

                    "fontSize": "14",

                    "isBold": "1"


            }, {

                "id": "Grp3",

                "items": [{

                    "type": "text",

                    "label": "HIGH",

                    "font": "Verdana",


                    "x": "216",

                    "y": "105",

                    "align": "left",

                    "vAlign": "left",

                    "fontcolor": "FF0000",

                    "fontSize": "14",

                    "isBold": "1"






Share this post

Link to post
Share on other sites



Please use macros to position the annotations, then the placement will be similar in all environments.


Please check this fiddle:


Also you can check out macros here:

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
Sign in to follow this