Utilizing Highcharts for creating two charts within Angular (although that detail may not be relevant to the issue at hand) - a pie chart and a bar chart. I have both charts defined and my objective is to initiate a drill-down action in the bar chart upon clicking on the pie chart. The drill-down should happen using the same dataset. Below are the settings for these charts:
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
}
};
Within this section, I capture the click event on the pie chart:
events: {
click: function (event) {
console.log(TACTIC_CHART.chart.drilldownLevels.length);
}
},
I've attempted to retrieve this information but encounter an error cannot get length of undefined. Despite trying various solutions found, none have been successful. The main issue lies in the need to maintain the data for the bar chart without redrawing it, but rather activating the drill-down feature if feasible. Appreciate any assistance provided! Thanks.