I have a project where the data in the main chart is best represented as a column chart and the data in a drilldown should be a bar chart.
However when I try to drilldown, the drilldown is still a column chart even with the type set to bar.
Is this possible to do with the provided Highcharts drilldown API? I would like to have the "back" button and support multiple drilldown levels.
Here is a basic example that demonstrates the problem:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
type: 'bar',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
type: 'bar',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
type: 'bar',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
})
});
Here is a JSFIDDLE
EDIT: This seems like it could be considered a bug in Highcharts as it is more of a problem than just drilling down from a column to a bar chart. If you start with a bar graph and drill down to a line graph, the axes are messed up in the drilldown.
EDIT2: Here is the solution I ended up with
$(function () {
(function (H) {
H.wrap(H.Point.prototype, 'init', function (proceed, series, options, x) {
var point = proceed.call(this, series, options, x),
chart = series.chart,
tick = series.xAxis && series.xAxis.ticks[x],
tickLabel = tick && tick.label;
if (point.drilldown) {
if (tickLabel) {
if (!tickLabel._basicStyle) {
tickLabel._basicStyle = tickLabel.element.getAttribute('style');
}
tickLabel.addClass('highcharts-drilldown-axis-label').css({
'text-decoration': 'none',
'font-weight': 'normal',
'cursor': 'auto'
}).on('click', function () {
if (point.doDrilldown) {
return false;
}
});
}
}
return point;
});
H.wrap(H.Pointer.prototype, 'setDOMEvents', function (proceed) {
proceed.call(this);
var pointer = this,
container = pointer.chart.container;
container.onclick = function (e) {
if (typeof pointer.onContainerClick === 'function') {
pointer.onContainerClick(e);
}
};
});
H.wrap(H.Chart.prototype, 'drillUp', function (proceed) {
if (!this.customDrilldown) {
proceed.call(this);
} else {
var userOptions = this.userOptions;
var drilldownLevels = this.drilldownLevels;
var level = drilldownLevels.pop();
var newChartConfig = level.userOptions;
this.destroy();
$(userOptions.chart.renderTo).highcharts(newChartConfig);
var newChart = $(userOptions.chart.renderTo).highcharts();
newChart.drilldownLevels = drilldownLevels;
if (drilldownLevels.length !== 0) {
newChart.showDrillUpButton();
}
newChart.customDrilldown = true;
HighchartsAdapter.fireEvent(newChart, 'drillup', {
seriesOptions: newChartConfig
});
}
});
H.wrap(H.Point.prototype, 'doDrilldown', function (proceed, _holdRedraw) {
if (!$.isPlainObject(this.drilldown)) {
proceed.call(this, _holdRedraw);
} else {
var newChartConfig = this.drilldown;
var oldChart = this.series.chart;
var userOptions = oldChart.userOptions;
var drilldownLevels = oldChart.drilldownLevels;
if (!drilldownLevels) {
drilldownLevels = [];
}
var oldSeries = this.series;
var level = {
userOptions: userOptions,
seriesOptions: oldSeries.userOptions
};
drilldownLevels.push(level);
oldChart.destroy();
$(userOptions.chart.renderTo).highcharts(newChartConfig);
var newChart = $(userOptions.chart.renderTo).highcharts();
newChart.drilldownLevels = drilldownLevels;
newChart.showDrillUpButton();
newChart.customDrilldown = true;
HighchartsAdapter.fireEvent(newChart, 'drilldown', {
point: this,
seriesOptions: newChartConfig
});
}
});
}(Highcharts));
var pieDD1 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 5
}, {
name: 'Blue',
y: 25
}]
}]
};
var pieDD2 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 15
}, {
name: 'Blue',
y: 25
}]
}]
};
var pieDD3 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 3
}, {
name: 'Blue',
y: 5
}]
}]
};
var pieDD4 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 50
}, {
name: 'Blue',
y: 3
}]
}]
};
var pieDD5 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 13
}, {
name: 'Blue',
y: 11
}]
}]
};
var pieDD6 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 50
}, {
name: 'Blue',
y: 25
}]
}]
};
var pieDD7 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 5
}, {
name: 'Blue',
y: 5
}]
}]
};
var pieDD8 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 15
}, {
name: 'Blue',
y: 5
}]
}]
};
var pieDD9 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 4
}, {
name: 'Blue',
y: 8
}]
}]
};
var pieDD10 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 33
}, {
name: 'Blue',
y: 66
}]
}]
};
var pieDD11 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 9
}, {
name: 'Blue',
y: 1
}]
}]
};
var pieDD12 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 8
}, {
name: 'Blue',
y: 13
}]
}]
};
var pieDD13 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 70
}, {
name: 'Blue',
y: 25
}]
}]
};
var pieDD14 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 50
}, {
name: 'Blue',
y: 10
}]
}]
};
var pieDD15 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 8
}, {
name: 'Blue',
y: 5
}]
}]
};
var pieDD16 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 5
}, {
name: 'Blue',
y: 8
}]
}]
};
var drilldown = {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
type: 'category',
title: {
text: 'X Axis'
}
},
yAxis: {
title: {
text: 'Y Axis'
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Widget A',
data: [{
name: 'Qtr 1',
y: 5,
drilldown: pieDD1
}, {
name: 'Qtr 2',
y: 25,
drilldown: pieDD2
}, {
name: 'Qtr 3',
y: 25,
drilldown: pieDD3
}, {
name: 'Qtr 4',
y: 20,
drilldown: pieDD4
}]
}, {
name: 'Widget B',
data: [{
name: 'Qtr 1',
y: 25,
drilldown: pieDD5
}, {
name: 'Qtr 2',
y: 5,
drilldown: pieDD6
}, {
name: 'Qtr 3',
y: 5,
drilldown: pieDD7
}, {
name: 'Qtr 4',
y: 15,
drilldown: pieDD8
}]
}]
};
var drilldown2 = {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'subtitle2'
},
xAxis: {
type: 'category',
title: {
text: 'X Axis'
}
},
yAxis: {
title: {
text: 'Y Axis'
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Widget A',
data: [{
name: 'Qtr 1',
y: 15,
drilldown: pieDD9
}, {
name: 'Qtr 2',
y: 15,
drilldown: pieDD10
}, {
name: 'Qtr 3',
y: 30,
drilldown: pieDD11
}, {
name: 'Qtr 4',
y: 5,
drilldown: pieDD12
}]
}, {
name: 'Widget B',
data: [{
name: 'Qtr 1',
y: 5,
drilldown: pieDD13
}, {
name: 'Qtr 2',
y: 25,
drilldown: pieDD14
}, {
name: 'Qtr 3',
y: 10,
drilldown: pieDD15
}, {
name: 'Qtr 4',
y: 20,
drilldown: pieDD16
}]
}]
};
// Create the chart
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Yearly Orders',
data: [{
name: 'Location 1',
y: 100,
drilldown: drilldown
}, {
name: 'Location 2',
y: 150,
drilldown: drilldown2
}]
}]
});
});
