Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

3 layer donut chart in Highcharts

Highcharts supports donut charts, essentially one inner pie chart with a second pie---shown as a donut---surrounding it. donut chart from the Highcharts demo site

Is it possible to create a three layer donut chart, i.e. a chart with a pie in the middle, a donut surrounding the pie, and another donut surrounding the first?

I suspect it is not possible, as their option plotOptions.pie.innerSize suggests that they support only an inner size and an outer size, not an inner size, middle size, and outer size. But perhaps I am missing something.

like image 310
David Bridgeland Avatar asked Jul 02 '13 23:07

David Bridgeland


1 Answers

Just try to set more series, and play a while with size and inner size, see: http://jsbin.com/oyudan/165/edit

       series: [{
            name: 'Browsers',
            data: [11,23,14,15],
            size: '40%',
            dataLabels: {
                formatter: function() {
                    return this.y > 5 ? this.point.name : null;
                },
                color: 'white',
                distance: -30
            }
        }, {
            name: 'Versions',
            data: [4,7,11,11,2,3,3,8,5,5,5],
            size: '70%',
            innerSize: '40%',
            dataLabels: {
                formatter: function() {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                }
            }
        }, {
            name: 'Versions',
            data: [2,2,3,4,6,5,6,5,1,1,2,1,2,1,4,4,2,3,2,3,2,3],
            size: '80%',
            innerSize: '70%',
            dataLabels: {
                formatter: function() {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                }
            }
like image 184
Paweł Fus Avatar answered Oct 14 '22 01:10

Paweł Fus