I am using Highcharts, and I am wondering if it is possible for highcharts to make circular charts like these:

I have this, but it fills the whole circle instead of just 60% of the circle (Here is the fiddle: /).

$(function() {
    // Create the chart
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        title: {
            text: ''
        },
        plotOptions: {
            pie: {
                shadow: false
            }
        },
        series: [{
            name: 'Browsers',
            data: [["Total",60]],
            size: '100%',
            innerSize: '95%',
            showInLegend:false,
            dataLabels: {
                enabled: false
            }
        }]
    });
});

I am using Highcharts, and I am wondering if it is possible for highcharts to make circular charts like these:

I have this, but it fills the whole circle instead of just 60% of the circle (Here is the fiddle: http://jsfiddle/fccuw47y/1/).

$(function() {
    // Create the chart
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        title: {
            text: ''
        },
        plotOptions: {
            pie: {
                shadow: false
            }
        },
        series: [{
            name: 'Browsers',
            data: [["Total",60]],
            size: '100%',
            innerSize: '95%',
            showInLegend:false,
            dataLabels: {
                enabled: false
            }
        }]
    });
});

• javascript
• highcharts

• Since you have answers that show how to do it, I'll throw this out there: It's a terribly ineffective way to display data (popular though it may be). Especially when displaying multiple measures - very inefficient (cognitively) for the user, who will look more that the number than the chart anyway, and very hard to pare between measures - as in most cases, a bar chart will do the work much more effectively. FWIW – jlbriggs Commented Jul 14, 2015 at 17:21
• This is just for a dashboard, they can see the actual drill down on another page. – Get Off My Lawn Commented Jul 14, 2015 at 17:40
• I don't want to belabor the point, but a dashboard is exactly the place where a large, ineffective data display is most inappropriate. Dashboards should be simple, effective, concise data visualizations rather than large, colorful, space-consuming, inefficient displays. Obviously you need to do what you need to do, but - for the record... – jlbriggs Commented Jul 14, 2015 at 18:11

2 Answers 2

We just implemented a similar looking chart using the solidgauge type in Highcharts.

You could use the piechart, but a pie chart is always going to fill 100%. It's the nature of the beast. If you wanted to use a piechart, you would have to supply it the amount for the remainder (empty space). For example, your series.data would have to be

[["Total", 60], ["Empty", 40]]

Here is an example using the solidgauge type of chart. It's much more flexible, and seems to be the more natural pick in this case.

http://jsfiddle/morqp9at/

You can set the color of a series data point to be transparent:

$(function() {
    // Create the chart
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        title: {
            text: ''
        },
        plotOptions: {
            pie: {
                shadow: false
            }
        },
        series: [{
            name: 'Browsers',
            data: [
               [ "Completed", 60],
               { 
                   "name": "Inplete",
                   "y": 40,
                   "color": 'rgba(0,0,0,0)'
               }
            ],
            size: '100%',
            innerSize: '95%',
            showInLegend:false,
            dataLabels: {
                enabled: false
            }
        }]
    });
});

That gives a "plete" circle with the "Completed" portion filled in.