How to create such pie chart/ donut chart in highchart?

Question

I have just started using highchart today. I have below query. Can anyone help me?

$(function () {

    var colors = Highcharts.getOptions().colors,
        categories = ['HIGH', 'MODERATE', 'CRITICAL'],
        data = [{
            y: 33.33,
            color: '#a6b9c1',
            drilldown: {
                name: 'MSIE versions',
                categories: ['MSIE 6.0', 'MSIE 7.0'],
                data: [0.5, 0.5],
                color: ['#30add9','#306885']
            }
        }, {
            y: 33.33,
            color: '#a6b9c1',
            drilldown: {
                name: 'Firefox versions',
                categories: ['Firefox v31', 'Firefox v32'],
                data: [0.5, 0.5],
                color: ['#30add9','#306885']
            }
        }, {
            y: 33.33,
            color: '#a6b9c1',
            drilldown: {
                name: 'Chrome versions',
                categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0'],
                data: [0.34, 0.33, 0.33],
                color: ['#23377b','#30add9','#306885']
            }
        }],
        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({
            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) {
            versionsData.push({
                name: data[i].drilldown.categories[j],
                y: data[i].drilldown.data[j],
                color: data[i].drilldown.color[j]
            });
        }
    }

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: 'OUR<br>MATERIAL<br>ISSUES',
            align: 'center',
            verticalAlign: 'middle',
            y: 0
        },
        subtitle: {
            text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
        },
        plotOptions: {
            pie: {
                shadow: false,
               // borderWidth:10,
                center: ['50%', '50%'],
                slicedOffset: 10,
                 states: {
                    hover: false
                }
            }
        },
       tooltip: {
            enabled: false 
       },
        series: [{
            name: 'Browsers',
            data: browserData,
            size: '60%',
            innerSize: '50%',
            dataLabels: {
                formatter: function () {
                    return this.point.name;
                },
                color: '#3f377f',
                rotation: -20,
              //  rotation: rotate(),
                distance: -40
            }
        }, {
            name: 'Versions',
            data: versionsData,
           // borderWidth:0,
            size: '100%',
            innerSize: '60%',
            dataLabels: {
                //  useHTML:true,
                formatter: function () {
                    return this.point.name;
                },
                color: '#000'
                //inside:true

            },
            allowPointSelect: false,
                stickyTracking: false,
                point: {
                    events: {
                        mouseOver: function() {
                            var point = this,
                                points = this.series.points;

                            // unslice sliced element(s)
                            for (var key in points) {
                                if (points[key].sliced) {
                                    points[key].slice(false);
                                }
                            }

                            // slice hovered element
                            if (!point.selected) {
                                point.slice(true);
                            }
                        }
                    }
                },
                events: {
                    mouseOut: function(event) {
                        // unslice sliced element(s)
                        for (var key in this.points) {
                            if (this.points[key].sliced) {
                                this.points[key].slice(false);
                            }
                        }
                    }
                }
        }]
    });
});

FIDDLE

On the first level, there are 3 levels - high, critical and moderate. If I use rotation:-20 & distance:-40 it gives proper alignment to critical label. I want such type of alignment to all 3 labels. Can anyone help me how to do that??

I also want to add data on the second level as per attached image. Each data will have a hyperlink associated with it. As of now, you can see only one label - MSIE 6 and similar, in place of that, I want to add multiple labels looking like similar to attached image. I have tried a lot, but not able to manipulate.enter image description here

UPDATE - I have worked upon a few other things and also made chart responsive. But I do have a few queries about it.

1. Is it possible to give curve to inside label - HIGH, CRITICAL and MODERATE as it appears in the image?

2. I saw ul-li structure for information within the 2nd level donut chart. As of now, you have used <br> tag to break the line but as this chart is also responsive, can't we give width to div so that in case of resize, if data is going out, it will be bound by the width of the div for all the 7 slices - DONE

3. Also, there's a span inside div which is getting top and left automatically and that's why entire info ul-li structure is coming somewhat downside. Is it possible to calculate that for each 2nd level donut chart based on position and apply it? I am not able to understand how that dynamic css is being applied to it

4. Each li in ul will have a link. so on click of that li - I can go to that particular page- I tried to apply it but was successful. --

   name:

   <ul><li><a href="http://wikipedia.org" target="_blank">text in first line</a></li><li>second line</li><li>third line<br/>that was long</li></ul>
   

   this works like a charm. But after clicking, the sliced effect is still there if I come back to that page from opened page, is there anything I can do?

5. On level-1 donut chart, there 3 labels. But out of them, 2 are having different structure and 1 is having another structure. I didn't understand reason behind it. If you can open developer tool and inspect them and you can clearly see the difference. One is having <g> - <text> - <tspan> while another one is having <div> - <span> Can anyone explain that?

Answer 1

Let's split this chart into 2 issues:

1. Rotated dataLabels - rotation can be set per dataLabel - API reference. It is possible to create a function that will set rotation for all dataLabels automatically.

Similar topic: Rotating dataLabels in a Highcharts pie chart

Grzegorz's solution with different rotation angles to better match your chart: http://jsfiddle.net/j7as86gh/12/

2. Text in slices - this issue can be solved by dataLables if your chart will be big enough to fit all the text. To enable list with dots in each slice you could set useHTML to true for dataLabels.

a) http://jsfiddle.net/3v3xfh6e/

Another way could be to use tooltip to display info for each slice.

b) http://jsfiddle.net/3v3xfh6e/1/