JSFiddle - React, Tailwind, and code Playground

by id10922606

HTML

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

JavaScript

//Pie-donut
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({
        chart: {
          renderTo: 'container',
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,           
            type: 'pie'
        },
        title: {
          text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
          //pointFormat: '{series.name}: <b>{point.percentage}</b>',
          //percentageDecimals: 1
        },
         
        plotOptions: {
          pie: {
                borderColor: '#fff',
                innerSize: '60%',
				
            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);
      
    }
  }
});