title: Is it possible to do a custom rendering with highchart-ng?!
body: <p>I tried to use Highcharts <a href="http://api.highcharts.com/highcharts#Renderer" rel="nofollow">Renderer</a> to create my own custom shapes.
  Unfortunately, I cannot find a way to invoke those <code>methods</code>.</p>
  
  <p>Is it even possible to use Highcharts <code>methods</code>? with <code>highcharts-ng</code>?!</p>
  
  <p><strong><a href="http://plnkr.co/edit/yk56WXvF3TLFlGJwIIUo?p=preview" rel="nofollow">My Plunk</a></strong></p>
  
  <p><strong>My code:</strong></p>
  
  <pre><code>var myapp = angular.module('myapp', ["highcharts-ng"]);
  
  myapp.controller('myctrl', function ($scope) {
    $scope.chartDonut = {
      options: {
        chart: {
            type: 'pie',
  
        },
        colors: [
             '#FFFFFF', 
             '#AA4643', 
  
        ],
        credits: {
          enabled: false
        },
  
        legend: {
          borderWidth: 0
        },
  
        plotOptions: {
          pie: {
            borderWidth: 0.2,
            borderColor: '#000000',
          }
        }
      },
  
      title: {
          text: 'Browser market share, April, 2011'
      },
  
      backgroundColor: '#cccccc',
      tooltip: {
          formatter: function() {
              return '&lt;b&gt;'+ this.point.name +'&lt;/b&gt;: '+ this.y +' %';
          }
      },
      series: [{
          name: 'Browsers',
          data: [{
                name: 'MATCHED',
                  y: 25
              }, {
                  name: 'UNMATCHED',
                  y: 50,
  
            color: {
                pattern: 'http://highcharts.com/demo/gfx/pattern1.png',
                width: 6,
                height: 6
            }
  
              }],
  
          size: '60%',
          innerSize: '56%',
          showInLegend: false,
          dataLabels: {
            enabled: true,
            connectorWidth: 0,
            connectorPadding: 0,
            useHTML: true,
            x: 20,
            formatter: function() {
                if (this.point.name === 'UNMATCHED') 
                  return '&lt;div id="donut_unmatched"&gt;'  
                          + '&lt;div id="unmatched_num"&gt;' + this.y + '&lt;/div&gt;' 
                          + '&lt;div id="unmatched_txt"&gt;' + this.point.name + '&lt;/div&gt;'
                          + '&lt;/div&gt;';
            }
          }
      }]
    };
  });
  </code></pre>