So I'm looking to create a 3d pie chart (in Highcharts), where the depth of each slice is determined by the point's value. The question here should give you a good idea of what I'm going for.
Currently Highcharts only supports depth arguments at the series level, so my first idea was to make multiple series, as is shown here: #1.
1:
Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 60
}
},
title: {
text: 'Contents of Highsoft\'s weekly fruit delivery'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
innerSize: 125,
depth: 60
}
},
series: [{
name: 'Delivered amount',
data: [
{ name: 'a', y: 1, val: 0.59, color: '#25683d' },
{ name: 'b', y: 1, val: 1.25, color: '#222f58' },
{ name: 'c', y: 2, val: 0.73, color: '#bebe89' },
],
depth: 45,
startAngle: 0,
endAngle: 180
}, {
data: [
{ name: 'd', y: 2, val: -0.69, color: '#900' },
{ name: 'e', y: 2, val: 0.57, color: '#a0a0a0' }
],
depth: 60,
startAngle: 180,
endAngle: 360
}]
});<script src="https://code.highcharts.com/highcharts.js">
</script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="height: 400px"></div>- The issue with this being that the depth appears to keep the same top reference point, instead of the intended results wherein each 'slice' starts at the same y point.
When that didnt work, I went back to storing all data in one series, and trying to update the SVG elements depth after render (as can be seen here: #2.
2:
Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 60
},
events: {
load: function() {
this.series[0].data.forEach((val, i) => {
var depth = val.graphic.attribs.depth;
val.graphic.attribs.depth = depth + (i * 10);
});
this.redraw();
}
}
},
title: {
text: 'Contents of Highsoft\'s weekly fruit delivery'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
innerSize: 125,
depth: 60
}
},
series: [{
name: 'Delivered amount',
data: [{
name: 'a',
y: 1,
val: 0.59,
color: '#25683d'
},
{
name: 'b',
y: 1,
val: 1.25,
color: '#222f58'
},
{
name: 'c',
y: 2,
val: 0.73,
color: '#bebe89'
},
{
name: 'd',
y: 2,
val: -0.69,
color: '#900'
},
{
name: 'e',
y: 2,
val: 0.57,
color: '#a0a0a0'
}
],
}]
});Once again, the depth appears to just add content down, and my attempts at translation (https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate) to shift each slice up have been less than successful in maintaining an aesthetically pleasing chart.. for instance: #3.
- also worth noting that i had to define an array for the y translations, which was mostly the results of trial and error
3:
Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 60
},
events: {
load: function() {
this.series[0].data.forEach((val, i) => {
var depth = val.graphic.attribs.depth;
val.graphic.attribs.depth = depth + (i * 10);
});
this.redraw();
},
redraw: function() {
var y_trans = [0, -8, -16, -25, -34];
this.series[0].data.forEach((val, i) => {
val.graphic.translate(0, y_trans[i]);
});
}
}
},
title: {
text: 'Contents of Highsoft\'s weekly fruit delivery'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
innerSize: 125,
depth: 60
}
},
series: [{
name: 'Delivered amount',
data: [{
name: 'a',
y: 1,
val: 0.59,
color: '#25683d'
},
{
name: 'b',
y: 1,
val: 1.25,
color: '#222f58'
},
{
name: 'c',
y: 2,
val: 0.73,
color: '#bebe89'
},
{
name: 'd',
y: 2,
val: -0.69,
color: '#900'
},
{
name: 'e',
y: 2,
val: 0.57,
color: '#a0a0a0'
}
],
}]
});Any references or ideas would be greatly appreciated as I'm starting to hit a wall.
