Search code examples
angularjshighchartshighcharts-ng

Is it possible to do a custom rendering with highchart-ng?!


I tried to use Highcharts Renderer to create my own custom shapes. Unfortunately, I cannot find a way to invoke those methods.

Is it even possible to use Highcharts methods? with highcharts-ng?!

My Plunk

My 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 '<b>'+ this.point.name +'</b>: '+ 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 '<div id="donut_unmatched">'  
                        + '<div id="unmatched_num">' + this.y + '</div>' 
                        + '<div id="unmatched_txt">' + this.point.name + '</div>'
                        + '</div>';
          }
        }
    }]
  };
});

Solution

  • Author here. At the moment it is not possible to do this. Pull requests gladly accepted. I'll probably add it myself in the near future.

    See here to track changes: https://github.com/pablojim/highcharts-ng/issues/97