Highcharts-vue: Stacked Columns with Drilldown - vue.js

Question

I'm trying to replicate this chart http://jsfiddle.net/edzk8Loe/ using vue js.
To be honest, I'm learning vuejs and so I'm trying to replicate already ready projects to get confident quickly.
The issue I'm facing at the moment I guess is a logic one. The functions have to create new series as drilldown when click on a column, seams not triggered at all. I'm not getting any error in the console and I'm
Not having yet a totally clear idea about the structure, I think I'm messing up the code. Hereunder you'll find the code I'm using in VUE.
<template>
<div class="chartElem">
<div class="row">
<highcharts class="chart" :constructor-type="'chart'" :options="chartOptions"></highcharts>
</div>
</div>
</template>
<script>
import HighchartsVue from "highcharts-vue";
import Highcharts from "highcharts";
import dataModule from "highcharts/modules/data";
import drilldown from "highcharts/modules/drilldown";
drilldown( Highcharts );
dataModule( Highcharts );
let drilldownChart, drilldownEvent, drilldownLevel = 0;
const chartOptions = {
chart: {
"type": "column",
},
credits: {
"enabled": false
},
plotOptions: {
column: {
stacking: "normal",
events: {
click: function ( event ) {
return false;
}
}
},
"series": {
"borderWidth": 0,
"dataLabels": {
"enabled": true,
"style": {
"textShadow": false,
"fontSize": "10px"
}
}
}
},
"legend": {
"enabled": false,
},
"yAxis": {
"stackLabels": {
"enabled": false,
"style": {
"fontWeight": "bold",
"color": "gray"
}
}
},
"title": {
"text": "Stacked Column Drilldown Chart",
"fontWeight": "bold"
},
"xAxis": {
"title": {},
"type": "category"
},
"yAxis": [ {
"title": {
"text": "Number of Students"
},
"min": 0,
"allowDecimals": false
} ],
"series": [ {
"name": "Outstanding",
"color": "rgb(102, 168, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 1,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Very Good",
"color": "rgb(128, 183, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Satisfactory",
"color": "rgb(179, 212, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 1,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Needs Improvement",
"color": "rgb(204, 226, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Not Performing",
"color": "rgb(230, 242, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
} ]
};
export default {
data: () => ( {
chartOptions,
drilldownChart,
drilldownEvent,
drilldownLevel
} ),
methods: {},
computed:{
drilldown: function ( e ) {
if ( !e.seriesOptions ) {
updateGraph( true, this, e );
}
},
drillup: function ( e ) {
if ( !e.seriesOptions.flag ) {
drilldownLevel = e.seriesOptions._levelNumber;
updateGraph( false );
}
}
},
mounted() {
function updateGraph( isDrilldown, chart, e ) {
if ( isDrilldown ) {
drilldownLevel++;
drilldownChart = chart;
drilldownEvent = e;
if ( drilldownLevel === 1 ) {
var drilldowns = {
'Social Science': {
name: 'Outstanding',
color: 'rgb(102, 168, 255)',
data: [ {
name: 'Geography',
y: 7,
drilldown: true
}, {
name: 'History',
y: 4
}, {
name: 'Civics',
y: 9
} ]
}
},
drilldowns2 = {
'Social Science': {
name: 'Very Good',
color: 'rgb(128, 183, 255)',
data: [ {
name: 'Geography',
y: 4,
drilldown: true
}, {
name: 'History',
y: 8
}, {
name: 'Civics',
y: 2
} ],
},
},
drilldowns3 = {
'Social Science': {
name: 'Satisfactory',
color: 'rgb(179, 212, 255)',
data: [ {
name: 'Geography',
y: 4,
drilldown: true
}, {
name: 'History',
y: 7
}, {
name: 'Civics',
y: 1
} ],
}
},
drilldowns4 = {
'Social Science': {
name: 'Needs Improvement',
color: 'rgb(204, 226, 255)',
data: [ {
name: 'Geography',
y: 2,
drilldown: true
}, {
name: 'History',
y: 7
}, {
name: 'Civics',
y: 2
} ]
}
},
drilldowns5 = {
'Social Science': {
name: 'Not Performing',
color: 'rgb(230, 242, 255)',
data: [ {
name: 'Geography',
y: 6,
drilldown: true
}, {
name: 'History',
y: 3
}, {
name: 'Civics',
y: 0
} ],
}
},
series = drilldowns[ e.point.name ],
series2 = drilldowns2[ e.point.name ],
series3 = drilldowns3[ e.point.name ],
series4 = drilldowns4[ e.point.name ],
series5 = drilldowns5[ e.point.name ];
chart.addSingleSeriesAsDrilldown( e.point, series );
chart.addSingleSeriesAsDrilldown( e.point, series2 );
chart.addSingleSeriesAsDrilldown( e.point, series3 );
chart.addSingleSeriesAsDrilldown( e.point, series4 );
chart.addSingleSeriesAsDrilldown( e.point, series5 );
chart.applyDrilldown();
} else if ( drilldownLevel === 2 ) {
var drilldown1 = {
"Geography": {
"name": "Yes",
stacking: 'percent',
color: 'red',
"data": [ {
"name": "Q1",
"y": 1
}, {
"name": "Q2",
"y": 2
}, {
"name": "Q3",
"y": 3
}, {
"name": "Q4",
"y": 4
} ]
}
};
var drilldown2 = {
"Geography": {
"name": "No",
stacking: 'percent',
color: 'green',
"data": [ {
"name": "Q1",
"y": 1
}, {
"name": "Q2",
"y": 2
}, {
"name": "Q3",
"y": 3
}, {
"name": "Q4",
"y": 4
} ]
}
};
var drilldown3 = {
"exampleDrilldown": {
type: 'line',
"name": "Example",
color: 'black',
"data": [ {
"name": "Q1",
"y": 10
}, {
"name": "Q2",
"y": 20
}, {
"name": "Q3",
"y": 30
}, {
"name": "Q4",
"y": 40
} ]
}
}
chart.addSingleSeriesAsDrilldown( e.point, drilldown1[ e.point.name ] );
chart.addSingleSeriesAsDrilldown( e.point, drilldown2[ e.point.name ] );
chart.addSingleSeriesAsDrilldown( e.point, drilldown3[ 'exampleDrilldown' ] );
console.log( e );
chart.applyDrilldown();
}
}
}
}
}
</script>
I'm not looking for someone is doing the task instead of me, I won't learn anything. Ideas and tips are super welcomed.
Cheers

Answer 1

You've made several simple mistakes in your code.
1) Add updateGraph function to chart methods - that way you can invoke this method in drilldown callback
2) Save chart component reference in the chart object to be able to use updateGraph method from drilldown callback function. You can make it using mounted() hook:
mounted() {
this.$children[0].chart.vueRef = this;
}
3) Data should be a function that returns an object with properties:
data() {
return {
chartOptions,
drilldownChart,
drilldownEvent,
drilldownLevel
}
}
4) Add drilldown and drillup callbacks to chart.events object. There you can invoke updateGraph method from the chart component reference saved in mounted hook:
chart: {
"type": "column",
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
this.vueRef.updateGraph(true, this, e);
}
},
drillup: function(e) {
if (!e.seriesOptions.flag) {
this.vueRef.drilldownLevel = e.seriesOptions._levelNumber;
this.vueRef.updateGraph(false);
}
}
}
}
Demo:
https://codesandbox.io/s/2w513lwpw0