Highchart dual layer donut slide both the inner and outer donuts together - highcharts

Question

I am trying to slide both the inner and other donut out when the inner donut is clicked. In the below link only inner donut is sliced out.
http://jsfiddle.net/bvL0r6tq/
I tried to select the outer slice through point select but they do not move out together. The outer ones spread between themselves.
can anyone please let me know how slice both the inner & outer donut out when the inner donut is clicked without spreading the outer donut among themeselves.
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
data = [{
y: 56.33,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
color: colors[0]
}
}, {
y: 10.38,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
color: colors[1]
}
}, {
y: 24.03,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0',
'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0'
],
data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
color: colors[2]
}
}, {
y: 4.77,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
color: colors[3]
}
}, {
y: 0.91,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],
data: [0.34, 0.17, 0.24, 0.16],
color: colors[4]
}
}, {
y: 0.2,
color: colors[5],
drilldown: {
name: 'Proprietary or Undetectable',
categories: [],
data: [],
color: colors[5]
}
}],
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
sliced: categories[i] == 'MSIE' ? true : false,
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, January, 2015 to May, 2015'
},
subtitle: {
text: 'Source: netmarketshare.com'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%'],
slicedOffset: 20
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData,
size: '0%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
Thanks,
Sarath

Answer 1

It is not possible with current implementation of sliced property. However, you can achieve that functionality with some effort. You need to move slices which have same browser as they would be one point.
Split your data to inner series and outer series - one outer series per browser type. An outer series should have invisible points so you will have only part of the pie visible.
series: [{
name: 'Browsers',
keys: ['y'],
data: [40, 30, 30],
size: '80%',
innerSize: 0,
slicedOffset: 20,
colorByPoint: true
}, {
data: [20, 20, {
y: 60,
visible: false
}]
}, {
color: colors[1],
data: [{
y: 40,
visible: false
}, 10, 10, 10, {
y: 30,
visible: false
}]
}, {
color: colors[2],
data: [{
y: 70,
visible: false
}, 5, 5, 5, 15]
}]
On click event you need to update center of the correct outer series - the translation for the center should be equaled translation of the sliced point.
const translateSeries = function(series, center, translation) {
const cx = center[0],
cy = center[1];
series.update({
center: [cx + translation.translateX, cy + translation.translateY]
});
};
const translate = function(e) {
const innerSeries = this.chart.series[0];
let point, series;
if (this !== innerSeries) {
point = innerSeries.data[this.index - 1];
series = this;
} else {
point = e.point;
series = this.chart.series[point.index + 1];
}
point.update({
sliced: true
}, false);
translateSeries(series, innerSeries.center, point.slicedTranslation)
};
Live example and output
const colors = Highcharts.getOptions().colors;
const translateSeries = function(series, center, translation) {
const cx = center[0],
cy = center[1];
series.update({
center: [cx + translation.translateX, cy + translation.translateY]
});
};
const translate = function(e) {
const innerSeries = this.chart.series[0];
let point, series;
if (this !== innerSeries) {
point = innerSeries.data[this.index - 1];
series = this;
} else {
point = e.point;
series = this.chart.series[point.index + 1];
}
point.update({
sliced: true
}, false);
translateSeries(series, innerSeries.center, point.slicedTranslation)
};
Highcharts.chart('container', {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
ignoreHiddenPoint: false,
slicedOffset: 0,
size: '80%',
innerSize: '60%',
colorByPoint: false,
dataLabels: {
enabled: false
},
events: {
click: translate
}
}
},
series: [{
name: 'Browsers',
keys: ['y'],
data: [40, 30, 30],
size: '80%',
innerSize: 0,
slicedOffset: 20,
colorByPoint: true
}, {
data: [20, 20, {
y: 60,
visible: false
}]
}, {
color: colors[1],
data: [{
y: 40,
visible: false
}, 10, 10, 10, {
y: 30,
visible: false
}]
}, {
color: colors[2],
data: [{
y: 70,
visible: false
}, 5, 5, 5, 15]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500"></div>