AngularJS Live Example

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/maps/fusioncharts.worldwithantarctica.js"></script>
<script src="https://rawgit.com/fusioncharts/angularjs-fusioncharts/master/dist/angular-fusioncharts.min.js"></script>
<html ng-app="HelloApp">
<body ng-controller="MyController">

 <fusioncharts 
    id="mychartcontainer"
    chartid="mychart"
    width="{{width}}" 
    height="400"
    type="worldwithantarctica"
    dataFormat="json"
   dataSource="{{dataSource}}"></fusioncharts>
    

</body>
</html>

JavaScript

var app = angular.module('HelloApp', ["ng-fusioncharts"])

app.controller('MyController', function ($scope) {
    
    $scope.width = 600;
 
    $scope.dataSource = {
		"chart": {
			"caption": "Shipment Across Continents",
			"theme": "fusion",
			"includeValueInLabels": "1",
			"formatNumberScale": "0",
			"showLegend": "0",
		},
		"colorrange": {
			"gradient": 0,
			"color": [{
				"minvalue": "0",
				"maxvalue": "100",
				"code": "#666666",
				"displayValue": "< 100"
			},{
				"minvalue": "100",
				"maxvalue": "1000",
				"code": "#D0DFA3",
				"displayValue": "100-1000"
			}, {
				"minvalue": "1000",
				"maxvalue": "50000",
				"code": "#B0BF92",
				"displayValue": "1000-50000"
			}, {
				"minvalue": "50000",
				"maxvalue": "100000",
				"code": "#91AF64",
				"displayValue": "50000-100000"
			}, {
				"minvalue": "100000",
				"maxvalue": "500000",
				"code": "#A9FF8D",
				"displayValue": "> 500000"
			}]
		},
		"data": []
	};
});