How to Get element properties from Highchart

Question

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: 40,
            useHTML: true
        },

chart: {
          renderTo: 'container',
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,           
          type: 'pie'
        },
        title: {
          text: 'CAPITAL (DEVON) E&P CAPEX'
        },
        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);

    }
  }

});

I am trying to create a dount chart with a circle. Is there any option for creating circle on center of chart? How to get properties (positions or width) of highchart SVG elements like <g class="highcharts-series-group"> by jquery

https://jsfiddle.net/id10922606/81cwutyf/1/

Answer 1

for this issue :

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

see fiddle here