Double donut-like chart with negative values

Question

I've been asked to do this kind of graph (40,9% and 16,4% are examples, they should indicate something like -6% and 9%):

Any idea on how I can get that kind of result, using a javascript library, if possible (but it is not a must) Highcharts?

Thanks

Answer 1

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

Answer 2

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.