How to create doughnut highchart using angular JS

Question

I want to create a doughnut highchart using angular js.

javascript is-

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: 'Browser<br>shares<br>2015',
            align: 'center',
            verticalAlign: 'middle',
            y: 40
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: true,
                    distance: -50,
                    style: {
                        fontWeight: 'bold',
                        color: 'white',
                        textShadow: '0px 1px 2px black'
                    }
                },
                startAngle: -180,
                endAngle: 180,
                center: ['50%', '55%']
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            innerSize: '50%',
            data: [
                ['Firefox',   10.38],
                ['IE',       56.33],
                ['Chrome', 24.03],
                ['Safari',    4.77],
                ['Opera',     0.91],
                {
                    name: 'Proprietary or Undetectable',
                    y: 0.9,
                    dataLabels: {
                        enabled: false
                    }
                }
            ]
        }]
    });
});

html is-

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

and I am including these scripts files -

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

How would I convert the above script in angular js. Can anyone help me on this? I think some directive function needs to be created.I am new to custom directives in angular, can anybody help how we do this in angular for the doughnut highchart?

How about using the highcharts-ng ?

Sebastian Bochan
– Sebastian Bochan

2016-07-07 13:19:42 +00:00
Commented Jul 7, 2016 at 13:19 — Sebastian Bochan
– Sebastian Bochan, Commented Jul 7, 2016 at 13:19
highcharts-ng is working for me.

Aanchal
– Aanchal

2016-07-08 16:17:33 +00:00
Commented Jul 8, 2016 at 16:17 — Aanchal
– Aanchal, Commented Jul 8, 2016 at 16:17

ANK · Accepted Answer · 2017-01-18 09:36:43Z

1

No need to convert the highcharts in angular as its already exists. No need to inject the dependencies. You can use it directly. Just inject the highcharts files

<script src="script/chart/highcharts.js"></script>
<script src="script/chart/highcharts-more.js"></script>
<script src="script/chart/drilldown.js"></script>
<script src="script/chart/highcharts-3d.js"></script>
<script src="script/chart/exporting.js"></script>

as per need. and in controller use directly the Highcharts.chart({//code goes here}). Here is the link for donut highchart

answered Jan 18, 2017 at 9:36

ANK

2932 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create doughnut highchart using angular JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related