How to make a Highcharts semi-circle donut chart using Hightchart-ng

Question

I am attempting to create a Highcharts Semi-circle donut chart in my angular application. I have installed the Highcharts-ng directive. For whatever reason, it appears to be skipping the plotOptions section completely and that is where the start and end angle are set, thereby creating the donut. What I get is a full circle pie chart. Here is my code:

<div ng-app="myapp">
    <div ng-controller="myctrl">
        <highchart id="chart1" config="highchartsNG"></highchart>
    </div>
</div>

    //See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {

    $scope.options = {
        type: 'pie',
        colors: ['#971a31', '#ffffff']
    }

    $scope.swapChartType = function () {
        if (this.highchartsNG.options.chart.type === 'line') {
            this.highchartsNG.options.chart.type = 'bar'
        } else {
            this.highchartsNG.options.chart.type = 'line'
        }
    }

    $scope.highchartsNG = {
        options: {
            colors: ['#971a31', '#ffffff'],
            chart: {
                type: 'pie',
                backgroundColor: '#f1f1f2',
                height: 150
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: 'Hello',
            style: {
                color: '#971a31',
                fontWEight: 'bold',
                fontSize: '15px'
            },
            verticvalAlign: 'middle',
            y: 20,
            x: -24
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'  
        },
        plotOptions: {
            pie: {
                borderColor: '#000000',
                size: 115,
                dataLabels: {
                    enabled: false,
                    distance: -50,
                    style: {
                        fontWeight: 'bold',
                        color: 'white',
                        textShadow: '0px 1px 2px black',

                    }

                },
                startAngle: -90,
                endAngle: 90,
                center: ['30%', '75%']
            }
        },
        series: [{
            type: 'pie',
            name: 'Loan',
            innerSize: '50%',
            data: [
                ['85% paid', 85],
                ['15% owed', 15]

            ]
        }],
        loading: false
    }

});

I have created a JSFiddle here:

http://jsfiddle.net/mikemahony/hzdewsx8/

What am I missing?

Karthik Karthik · Accepted Answer · 2015-01-16T20:01:47

Highcharts-ng directive needs those properties to go under options.

$scope.highchartsNG = { 
    options:{
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: true,
                    distance: -50,
                    style: {
                        fontWeight: 'bold',
                        color: 'white',
                        textShadow: '0px 1px 2px black'
                    }
                },
                startAngle: -90,
                endAngle: 90,
                center: ['50%', '75%']
            }
        }
    },

In highchartsNGConfig the options property is a standard highcharts options object. e.g. anything you can pass into `new Highcharts.Chart(options); works here.

This options object is watched for changes. When something changes here the whole chart is recreated.

How to make a Highcharts semi-circle donut chart using Hightchart-ng

1 Answers