AngularGauge text is cut off

[radarbuddy]

For some reason the upper and lower limt and some ticker values are cut off?

I am placing the gauge in gauge1 div below.

<div class="row span10" style="margin-left:0px;width:auto; vertical-align:bottom;display:block">

<!--

<div class="span2 vintage" style="margin-left:0px; padding-right:15px; width:auto;display: table-cell;vertical-align: bottom;float: none;">

<h1 style="vertical-align:text-bottom">165</h1>

</div>

-->

<div class="span4" style="margin-left:0px; padding-left:0px;padding-right:0px;margin-right:0px; display: table-cell;vertical-align: bottom;float: none;">

<div id="gauge1" style="width:200px; height:200px">

</div>

</div>

<div class="span6" style="margin-left:0px; width:auto;vertical-align:top;display: table-cell;float:none">

<div id="chart1" style="width: 750px;height:200px"></div>

</div>

</div>

 

javascript:

var gaugeThree = new FusionCharts("AngularGauge", "3gauge", "200", "200", "0");

gaugeThree.setJSONData(

{

"chart": {

"lowerlimit": "100",

"is2D": "0",

"upperlimit": "230",

"gaugestartangle": "240",

"showBorder": "0",

"lowerLimitDisplay":"100",

"upperLimitDisplay":"230",

"bgColor": "#ffffff",

"gaugeendangle": "-60",

"manageResize":"1",

"gaugefillmix":"",

"gaugeouterradius": "100",

"gaugeinnerradius": "80"

},

"colorrange": {

"color": [

{

"minvalue": "100",

"maxvalue": "170",

"code": "FF0000"

},

{

"minvalue": "170",

"maxvalue": "185",

"code": "FFFF00"

},

{

"minvalue": "185",

"maxvalue": "205",

"code": "008000"

},

{

"minvalue": "205",

"maxvalue": "215",

"code": "FFFF00"

},

{

"minvalue": "215",

"maxvalue": "230",

"code": "FF0000"

}

]

},

"dials": {

"dial": [

{

"value": "205.8",

"rearextension": "1",

"baseWidth":"4",

"topWidth":"4"

}

]

}

}

);

gaugeThree.render("gauge1");

 

 

 

[Guest Rishab]

Hi,

The issue is arriving due to the value set for the <chart> element attribute 'gaugeOuterRadius' to 100.

This attribute is used to set the outer radius for the color range scale.

Please try setting it explicitly to 90 in the JSON DataSource.

Alternatively, you can also resolve the issue by updating the chart dimension to 250 x 250.

[radarbuddy]

thanks that worked

[Guest Sumedh]