2


Here's a plunker:
http://plnkr.co/edit/S1B9Q9e1yen0QgmKt2ri

var chartConfig = {
  title: {
    text: 'Number of offers by trend'
  },
  subtitle: {
    text: 'My company'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.name}: {point.y:.1f}%'
      }
    }
  },

  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
  },
  options: {
    chart: {
      type: 'pie'
    },
    legend: {
      align: 'right',
      x: -70,
      verticalAlign: 'top',
      y: 20,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
    },
    tooltip: {
      headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
      pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        dataLabels: {
          enabled: true,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
          style: {
            textShadow: '0 0 3px black, 0 0 3px black'
          }
        }
      }
    }
  },
  series: [{
    name: 'Trends',
    colorByPoint: true,
    data: TREND_LIST
  }],
  drilldown: {
    series: NUMBER_OF_OFFERS_BY_TREND
  }
};

the pie is drown fine but I can't click to get the drill down pie

And this is the original fiddle from highcharts.com, I changed it a bit so it can work with highcharts-ng:
bit.ly/1kOPi7L

Thanks for helping

Fourat
  • 2,366
  • 4
  • 38
  • 53
  • Does highcharts-ng support drilldown.js plugin? (Btw, include drilldown.js file - it's missing) - I can see you have already created on it's github [ticket](https://github.com/pablojim/highcharts-ng/issues/159). – Paweł Fus Jul 22 '14 at 10:47
  • I did and it supports, your comment helped a lot, thank you – Fourat Jul 22 '14 at 11:11
  • Oh right, I totally forget about that question: http://stackoverflow.com/questions/22195266/highcharts-ng-with-drilldown – Paweł Fus Jul 22 '14 at 19:32

1 Answers1

11

I finally solved it (sorry I had to answer my own question), thanks to Pawel Fus's enlightening comment :)
First I added the drill down module:

    <script src="http://code.highcharts.com/modules/drilldown.js"></script>

Next I followed this answer and added some code to the highcharts-ng lib:
Highcharts-ng with drilldown

Finally I put the drilldown attribute under the option attribute as mentioned here:
https://github.com/pablojim/highcharts-ng/pull/145

Here is the final woorking plunker:
http://plnkr.co/edit/S1B9Q9e1yen0QgmKt2ri

Community
  • 1
  • 1
Fourat
  • 2,366
  • 4
  • 38
  • 53