JSFiddle - React, Tailwind, and code Playground

by Nishith Chaturvedi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div class="hc-pie" items="limitedIdeas"></div>
  </div>
</div>

CSS

.highcharts-subtitle {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px; 
	background:#7EBA00;
	text-align: center;
}

JavaScript

function MyCtrl($scope, limitToFilter) {


Highcharts.setOptions({
     colors: ['#B1D08C', '#B1D08C', '#B1D08C']
    });
	
$scope.ideas = [
    ['Development', 70],
    ['Exploration', 5],
    ['Other', 10],
    ['ideas4', 5]
  ];
  

$scope.limitedIdeas = limitToFilter($scope.ideas, 3);


}

angular.module('myApp', [])
  .directive('hcPie', function () {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
controller: function ($scope, $element, $attrs) {
      console.log(4);

    },
template: '<div id="container" style="margin: 0 auto">not working</div>',
    link: function (scope, element, attrs) {
      console.log(3);
var chart = new Highcharts.Chart({


 subtitle: {
            text: '$2567 mm',
            align: 'center',
            verticalAlign: 'middle',
            y: 0,
			useHTML: true
        },

chart: {
          renderTo: 'container',
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,           
          type: 'pie'
        },
        title: {
          text: 'TITLE '
        },
        tooltip: {
          //pointFormat: '{series.name}: <b>{point.percentage}</b>',
          //percentageDecimals: 1
        },
         
plotOptions: {
		pie: {
                borderColor: '#fff',
                innerSize: '60%',
                cx: 10,
				
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              color: '#000000',
              connectorColor: '#000',
              /*formatter: function () {
                return '<b>' + this.point.name + '</b>: ' + this.percentage;
              }*/
            }
}
},

series: [{
          type: 'pie',
          name: 'Browser share',
          data: scope.items
        }]
      });
	  
	  
scope.$watch("items", function (newValue) {
        chart.series[0].setData(newValue, true);
      }, true);
      
    }
  }
  
  
 
 
});