CODEWITHSUNDEEP
javascriptangularjshighcharts
Marko Vasic
Marko Vasic

Reputation: 690

Manually activate Drill down in Highcharts chart by clicking on another chart

I'm using highcharts to draw two charts in angular(but I don;t think that is important or this problem) - pie chart and bar chart. I have two charts defined and I want to trigger drill down in bar chart when I click on pie chart. Also, drill down should be preformed for same data. These are chart settings:

import Highcharts from 'highcharts/highstock';

export const MEDIA_CHART = {
chart: {
  height: 350,
  type: 'pie',
  width: 300
},
drilldown: {
 allowPointDrilldown: true
},
legend: {
 borderWidth: 0,
 enabled: true,
 symbolRadius: 0,
 title: {
  text: ''
},
useHTML: true,
/*eslint-disable*/
labelFormatter: function () {
  return '<div style="max-width:150px;"><span style="width:100%;display:block;text-align:center;">' + this.name + '</span><span>' + Highcharts.numberFormat(this.y, 2, ',', '.') + '€</span></div>';
}
/*eslint-enable*/
},
plotOptions: {
 pie: {
  center: ['48%', '42%'],
  showInLegend: true
 },
series: {
  allowPointSelect: true,
  cursor: 'pointer',
  /*eslint-disable*/
  events: {
    click: function (event) {
      console.log(TACTIC_CHART.chart.drilldownLevels.length);
    }
  },
  /*eslint-enable*/
  dataLabels: {
    enabled: true,
    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
  }
}
},
 series: [{
 size: '95%',
 innerSize: '60%'

}],
tooltip: {
borderWidth: 0,
backgroundColor: '#37474F',
headerFormat: '',
pointFormat: '{point.name}: {point.y:,.2f}€',
style: {
  color: '#fff',
  padding: 0,
  fontWeight: 700
},
useHTML: true
}
};

export const TACTIC_CHART = {
chart: {
 type: 'bar',
 height: '100%'
},
colors: ['#969696', '#F1292E', '#A0CB0E'],
drilldown: {
  allowPointDrilldown: true
},
xAxis: {
title: {
  text: null
},
 type: 'category'
},
yAxis: {
 min: 0,
 title: {
  text: 'Budget €',
  align: 'high'
},
labels: {
  overflow: 'justify'
}
},
tooltip: {
  enabled: true,
  borderWidth: 0,
  backgroundColor: '#37474F',
  headerFormat: '',
  pointFormat: '{series.name}: {point.y:,.2f}€',
  style: {
  color: '#fff',
  padding: 0,
  fontWeight: 700
},
  useHTML: true,
  valueSuffix: ' €'
},
title: {
align: 'left'
},
plotOptions: {
bar: {
  dataLabels: {
    enabled: true,
    /*eslint-disable*/
    formatter:  function () {
      return Highcharts.numberFormat(this.y, 2, ',', '.') + '€';
    }
    /*eslint-enable*/
  }
 }
},
legend: {
  enabled: true,
  layout: 'horizontal',
  align: 'center',
  verticalAlign: 'top',
  floating: true,
  borderWidth: 1,
  backgroundColor: '#FFFFFF',
  shadow: true
}
};

In this part I catch click on pie chart:

events: {
    click: function (event) {
      console.log(TACTIC_CHART.chart.drilldownLevels.length);
    }
  },

I tried to get this but I get error can't get length of undefined. I tried every possible solution that I found, but without any luck. Problem is that I need to preserve data for bar chart, so I can't redraw it, I need to activate drill down if it's possible. Thanks everyone for help!

Upvotes: 2

Views: 2993

Answers (1)

pawel_d
pawel_d

Reputation: 3070

You can call internal function Point.doDrilldown() on specific point of another chart in drilldown event and Chart.drillUp() on drillup event. Also, remember to create some flag variable to prevent infinite loop. Take a look at the below example I prepared for you. In case of any question, feel free to ask.

API Reference:
http://api.highcharts.com/highcharts/chart.events.drilldown
http://api.highcharts.com/highcharts/chart.events.drillup

Example:
http://jsfiddle.net/048kne3c/

Upvotes: 4

Related Questions