AngularJS example 1

author: Highcharts

by samur3

HTML

<script src="https://code.highcharts.com/highcharts.js">
</script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>



<body ng-controller="myController" ng-app="myModule">
  <div id="container">Placeholder for chart</div>

</body>

JavaScript

var points = [{
	  id: 'a_1',
	  name: 'AB',
	  value: 6,
	  colorValue: 1
	}, {
	  id: 2,
	  name: 'B',
	  value: 6,
	  parent: 'a_1',
	  colorValue: 2
	}, {
	  id: 3,
	  name: 'C',
	  value: 4,
	  colorValue: 3
	}, {
	  id: 4,
	  name: 'D',
	  value: 3,
	  colorValue: 4
	}, {
	  id: 5,
	  name: 'E',
	  value: 2,
	  colorValue: 5
	}, {
	  id: 6,
	  name: 'F',
	  value: 2,
	  colorValue: 6
	}, {
	  id: 7,
	  name: 'G',
	  value: 1,
	  colorValue: 7
	}];

	angular.module('myModule', [])
	  .controller('myController', function($scope) {
	    Highcharts.chart('container', {
	      tooltip: {
	        backgroundColor: 'black',
	        style: {
	          "color": "white",
	          "font": "Roboto"
	        },
	        borderColor: 'black',
	        borderRadius: 5,
	        formatter: function() {
	          return 'The value of <b> Name </b> is <b>' + this.point.name + '</b>, and the value is: ' + this.point.value;
	        }
	      },
	      colorAxis: {
	        minColor: '#ffcfab', //Highcharts.getOptions().colors[3],
	        maxColor: '#ff5e43' //'#FF5E43',

	      },
	      legend: {
	        enabled: false
	      },
	      series: [{
	        type: 'treemap',
	        layoutAlgorithm: 'squarified',
	        allowDrillToNode: true,
	        animationLimit: 1000,
	        dataLabels: {
	          enabled: false
	        },
	        levelIsConstant: false,
	        levels: [{
	          level: 1,
	          dataLabels: {
	            enabled: true
	          },
	          borderWidth: 3
	        }],

	        data: points
	      }],
	      title: {
	        text: 'All Data Source',
	        margin: 1,
	        style: {
	          font: 'Roboto Condensed',
	          fontSize: '24px',
	          display: 'block',
	        }
	      }
	    })
	  });