Text in wrong location.

[alexx]

I´am having some problems that the text in the graphs are not in the right place:

 

 

Any ideas whats wrong?

[Vishalika]

Hi,

 

Can you please specify the environment in which the chart is rendering such as browser details,FusionCharts version or any specific device?

 

Also, try to check this JSFiddle : http://jsfiddle.net/fusioncharts/ZsakS/

 

Awaiting response.

[alexx]

Chrome 42.0.2311.135

Firefox 37.0.2

Windows 8

FusionCharts  3.7.0

AngularJs

Twitter bootstrap

 

Here is the my code:

 

fusionChart.js

angular.module('app.directive.fusionCharts',[])
.directive('fusionChart', function($interval, simDataFactory, getDriveSessionsFactory){
	return{
		restrict:'A',
		controller: function($scope){
			FusionCharts.ready(function () {

                      var gaugeRpm = new FusionCharts({
			        "type": "angulargauge",
			        "renderAt": "chartRpm",
			        "width": "200",
			        "height": "200",
			        "dataFormat": "json",
			        "dataSource":{  
					    "chart": {
					        "manageresize": "1",
					        "origw": "320",
					        "origh": "320",
					        "tickvaluedistance": "-5",
					        "upperlimit": "8",
					        "bgcolor": "282828",
					        "lowerlimit": "0",
					        "basefontcolor": "FFFFFF",
					        "majortmnumber": "9",
					        "majortmcolor": "FFFFFF",
					        "majortmheight": "5",
					        "majortmthickness": "5",
					        "minortmnumber": "5",
					        "minortmcolor": "FFFFFF",
					        "minortmheight": "3",
					        "minortmthickness": "2",
					        "pivotradius": "10",
					        "pivotbgcolor": "000000",
					        "pivotbordercolor": "FFFFFF",
					        "pivotborderthickness": "2",
					        "tooltipbordercolor": "FFFFFF",
					        "tooltipbgcolor": "333333",
					        "gaugeouterradius": "135",
					        "gaugestartangle": "240",
					        "gaugeendangle": "-60",
					        "gaugealpha": "0",
					        "decimals": "0",
					        "showcolorrange": "1",
					        "placevaluesinside": "1",
					        "pivotfillmix": "1",
					        "showpivotborder": "1",
					        "annrenderdelay": "1",
					        "gaugeoriginx": "160",
					        "gaugeoriginy": "160",
					        "refreshinterval": "5",
					        "showborder": "1",
					    },
					    "dials": {
					        "dial": [
					            {
					                "value": "0",
					                "bgcolor": "000000",
					                "bordercolor": "FFFFFF",
					                "borderalpha": "100",
					                "basewidth": "4",
					                "topwidth": "4",
					                "borderthickness": "2",
					                "valuey": "260"
					            }
					        ]
					    },
					    "annotations": {
					        "groups": [
					            {
					                "x": "160",
					                "y": "160",
					                "items": [
					                    {
					                        "type": "circle",
					                        "radius": "150",
					                        "fillasgradient": "1",
					                        "fillcolor": "4B4B4B,AAAAAA",
					                        "fillalpha": "100,100",
					                        "fillratio": "95,5"
					                    },
					                    {
					                        "type": "circle",
					                        "x": "0",
					                        "y": "0",
					                        "radius": "140",
					                        "showborder": "1",
					                        "bordercolor": "cccccc",
					                        "fillasgradient": "1",
					                        "fillcolor": "ffffff,000000",
					                        "fillalpha": "50,100",
					                        "fillratio": "1,99"
					                    }
					                ]
					            },
					            {
					                "x": "160",
					                "y": "160",
					                "showbelow": "0",
					                "scaletext": "1",
					                "items": [
					                    {
					                        "type": "text",
					                        "y": "80",
					                        "label": "RPM",
					                        "fontcolor": "FFFFFF",
					                        "fontsize": "16",
					                        "bold": "1"
					                    }
					            }
					        ]
					    }
			            }
			      });

    gaugeRpm.render();

home.html

<accordion-group is-open="status.open4">
  <div class="row" data-fusion-chart>
  ...
     <div class="col-xs-6 col-md-3">
        <div id="chartWrapper">
           <div id="chartRpm"></div>
        </div>
     </div>
  </div>
</accordion-group>

[Vishalika]

Hi,

 

Can you please confirm if you are using the AngularJS plugin developed by FusionCharts?

 

Refer this link for the same: http://www.fusioncharts.com/dev/usage-guide/using-with-javascript-libraries/angularjs/introduction.html

 

Awaiting response.