I have little issue on drill-down API of HighCharts
In which I Created a Line Chart and on it's point click drill-down to stacked bar chart, I have a success so far but the stacked color is same for each column.
The drill down column are complete dynamic so I can't specify the the each series color manually, it should be assign automatically just like simple stacked bar chart.
I have reproduce the issue please have look in JSFiddle and remember all the drill-down series are dynamic.
Here is my code
$(function () {
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'xy',
borderColor: '#EBBA95',
borderWidth: 2,
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
const chart = this;
const drilldowns = {
'level': {
colorByPoint: true,
type: 'column',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
data: [123, 345],
level: 1
},
'level1': {
colorByPoint: true,
type: 'column',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
data: [948, 456],
level: 2
}
};
const series = [drilldowns['level'], drilldowns['level1']];
chart.addSingleSeriesAsDrilldown(e.point, series[0]);
chart.addSingleSeriesAsDrilldown(e.point, series[1]);
chart.applyDrilldown();
}
}
}
},
title: {
text: 'Limit',
align: 'left'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
max: 11
},
yAxis: {
type: 'logarithmic',
title: {
text: '',
align: 'high'
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [
{
name: 'Installation',
visible: true,
data: [
{
name: 'level1',
y: 43934,
drilldown: true
},
{
name: 'level2',
y: 52503,
drilldown: true
}
]
}
],
drilldown: {
series: []
}
});
});
I found an answer just add color: null
in each series of drill-down
and remove colorbypoint: true
Here is reference on GitHub for solution
Here is updated JSFiddle
Here is updated code:
$(function () {
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'xy',
borderColor: '#EBBA95',
borderWidth: 2,
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
const chart = this;
const drilldowns = {
'level': {
color:null,
type: 'column',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
data: [123, 345],
level: 1
},
'level1': {
color:null,
type: 'column',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
data: [948, 456],
level: 2
}
};
const series = [drilldowns['level'], drilldowns['level1']];
chart.addSingleSeriesAsDrilldown(e.point, series[0]);
chart.addSingleSeriesAsDrilldown(e.point, series[1]);
chart.applyDrilldown();
}
}
}
},
title: {
text: 'Limit',
align: 'left'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
max: 11
},
yAxis: {
type: 'logarithmic',
title: {
text: '',
align: 'high'
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [
{
name: 'Installation',
visible: true,
data: [
{
name: 'level1',
y: 43934,
drilldown: true
},
{
name: 'level2',
y: 52503,
drilldown: true
}
]
}
],
drilldown: {
series: []
}
});
});