title: How to make a Highcharts semi-circle donut chart using Hightchart-ng
body: <p>I am attempting to create a Highcharts Semi-circle donut chart in my angular application. I have installed the Highcharts-ng directive. For whatever reason, it appears to be skipping the plotOptions section completely and that is where the start and end angle are set, thereby creating the donut. What I get is a full circle pie chart. Here is my code:</p>
  
  <pre><code>&lt;div ng-app="myapp"&gt;
      &lt;div ng-controller="myctrl"&gt;
          &lt;highchart id="chart1" config="highchartsNG"&gt;&lt;/highchart&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
      //See: https://github.com/pablojim/highcharts-ng
  var myapp = angular.module('myapp', ["highcharts-ng"]);
  
  myapp.controller('myctrl', function ($scope) {
  
      $scope.options = {
          type: 'pie',
          colors: ['#971a31', '#ffffff']
      }
  
      $scope.swapChartType = function () {
          if (this.highchartsNG.options.chart.type === 'line') {
              this.highchartsNG.options.chart.type = 'bar'
          } else {
              this.highchartsNG.options.chart.type = 'line'
          }
      }
  
      $scope.highchartsNG = {
          options: {
              colors: ['#971a31', '#ffffff'],
              chart: {
                  type: 'pie',
                  backgroundColor: '#f1f1f2',
                  height: 150
              }
          },
          series: [{
              data: [10, 15, 12, 8, 7]
          }],
          chart: {
              plotBackgroundColor: null,
              plotBorderWidth: 0,
              plotShadow: false
          },
          title: {
              text: 'Hello',
              style: {
                  color: '#971a31',
                  fontWEight: 'bold',
                  fontSize: '15px'
              },
              verticvalAlign: 'middle',
              y: 20,
              x: -24
          },
          tooltip: {
              pointFormat: '{series.name}: &lt;b&gt;{point.percentage:.1f}%&lt;/b&gt;'  
          },
          plotOptions: {
              pie: {
                  borderColor: '#000000',
                  size: 115,
                  dataLabels: {
                      enabled: false,
                      distance: -50,
                      style: {
                          fontWeight: 'bold',
                          color: 'white',
                          textShadow: '0px 1px 2px black',
  
                      }
  
                  },
                  startAngle: -90,
                  endAngle: 90,
                  center: ['30%', '75%']
              }
          },
          series: [{
              type: 'pie',
              name: 'Loan',
              innerSize: '50%',
              data: [
                  ['85% paid', 85],
                  ['15% owed', 15]
  
              ]
          }],
          loading: false
      }
  
  });
  </code></pre>
  
  <p>I have created a JSFiddle here:</p>
  
  <p><a href="http://jsfiddle.net/mikemahony/hzdewsx8/" rel="nofollow">http://jsfiddle.net/mikemahony/hzdewsx8/</a></p>
  
  <p>What am I missing?</p>