CODEWITHSUNDEEP
javascriptjquerychartshighcharts
Samsquanch
Samsquanch

Reputation: 9146

Creating a ring chart with Highcharts

I'm attempting to create a "ring chart" similar to the ones found here (scroll down to ring charts) with Highcharts using a donut chart. So, if I want to display a data value of 46% of something, it circles around counter-clockwise to 46% and stops.

I don't have a lot to go off of at this point, but here is a fiddle with what I have so far.

And code:

$(function () {

       // Create the chart
        $('#container').highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Browser market share, April, 2011'
            },
            yAxis: {
                title: {
                    text: 'Total percent market share'
                }
            },
            plotOptions: {
                pie: {
                    shadow: false,
                    center: ['50%', '50%']
                }
            },
            tooltip: {
                valueSuffix: '%'
            },
            series: [ {
                name: 'Art Education',
                data: [
                        ['Covered by contributions',46]
                ],
                size: '70%',
                innerSize: '40%',
                dataLabels: {
                    formatter: function() {
                        // display only if larger than 1
                        return this.y > 1 ? '<b>'+ this.series.name +':</b> '+ this.y +'%'  : null;
                    }
                }
            }, {
                name: 'Versions',
                data: [1, 2],
                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;
                    }
                }
            }]
        });
    });


        </script>
    </head>
    <body>
<script src="./js/highcharts.js"></script>
<script src="./js/modules/exporting.js"></script>

<div id="container" style="min-width: 250px; width: 100%; height: 100%; margin: 0 auto;"></div>

2017 Update:

Highcharts can now do Semi circle donut charts which is what I was looking for. Example.

Upvotes: 0

Views: 1858

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

Simple example using polar chart with some data interpolation: http://jsfiddle.net/ghvKY/

function interpolateData (min, max, step, index) {
    var d = [];

    // add points from start to one before last
    for(var i = min; i < max; i += step){
         d.push([i,index]);   
    }
    //add end point
    d.push([max, index]);

    return d;
}

Upvotes: 2

Related Questions