Highcharts Multi-Depth 3d pie chart

Question

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.

Answer 1

You can use Highcharts wrap and extend translate method:

var each = Highcharts.each,
    round = Math.round,
    cos = Math.cos,
    sin = Math.sin,
    deg2rad = Math.deg2rad;

Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function(proceed) {
    proceed.apply(this, [].slice.call(arguments, 1));

    // Do not do this if the chart is not 3D
    if (!this.chart.is3d()) {
        return;
    }

    var series = this,
        chart = series.chart,
        options = chart.options,
        seriesOptions = series.options,
        depth = seriesOptions.depth || 0,
        options3d = options.chart.options3d,
        alpha = options3d.alpha,
        beta = options3d.beta,
        z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;

    z += depth / 2;

    if (seriesOptions.grouping !== false) {
        z = 0;
    }

    each(series.data, function(point) {

        var shapeArgs = point.shapeArgs,
            angle;

        point.shapeType = 'arc3d';

        var ran = point.options.h;

        shapeArgs.z = z;
        shapeArgs.depth = depth * 0.75 + ran;
        shapeArgs.alpha = alpha;
        shapeArgs.beta = beta;
        shapeArgs.center = series.center;
        shapeArgs.ran = ran;

        angle = (shapeArgs.end + shapeArgs.start) / 2;

        point.slicedTranslation = {
            translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
            translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
        };
    });
});

(function(H) {
    H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function(proceed) {
        // Run original proceed method
        var ret = proceed.apply(this, [].slice.call(arguments, 1));
        ret.zTop = (ret.zOut + 0.5) / 100;
        return ret;
    });
}(Highcharts));

Also, in load event you need to reverse the chart:

        events: {
            load: function() {
                var each = Highcharts.each,
                    points = this.series[0].points;

                each(points, function(p, i) {
                    p.graphic.attr({
                        translateY: -p.shapeArgs.ran
                    });

                    p.graphic.side1.attr({
                        translateY: -p.shapeArgs.ran
                    });

                    p.graphic.side2.attr({
                        translateY: -p.shapeArgs.ran
                    });
                });
            }
        }

Live demo: http://jsfiddle.net/BlackLabel/c4wk5z9L/

Docs: https://www.highcharts.com/docs/extending-highcharts