score:1

Accepted answer

it's possible with highcharts, documentation

e.g.

$(function () {
       data = [{
               valsecond: 25,
               valfirst: 62.5
              }];
        // build the data arrays
        var seconddata = [];
        var firstdata = [];
        for (var i = 0; i < data.length; i++) {
    
            // add second data
            seconddata.push({
                name: "second",
                y: data[i].valsecond,
                color: "#00ff00"
            });
    
            // add first data
                firstdata.push({
                    name: "first",
                    y: data[i].valfirst,
                    color:'#ff0000'
                });
        }
    
        // create the chart
        $('#container').highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: ''
            },
            plotoptions: {
                pie: {
                    animation: false,
                    shadow: false,
                    center: ['50%', '50%']
                }
            },
            tooltip: {
        	    valuesuffix: '%'
            },
            series: [{
                name: 'second',
                data: seconddata,
                size: '30%',
                startangle: 270,
                endangle: 360,
                innersize: '20%'

            }, {
                name: 'first',
                color:'#ffffff',
                data: firstdata,
                size: '80%',
                startangle: 0,
                endangle: 225,
                innersize: '60%',
                
            }]
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>

jsfiddle

score:1

in the highcharts you can adapt donut chart http://www.highcharts.com/demo/pie-donut, remove connectors, set usehtml for datalabels and rotate by css / rotation svg element. missing elements can by added by renderer.


Related Query

More Query from same tag