{"id":5240,"date":"2015-12-09T14:51:27","date_gmt":"2015-12-09T14:51:27","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=5240"},"modified":"2026-01-08T08:50:44","modified_gmt":"2026-01-08T08:50:44","slug":"194-using-highcharts-with-angular-js","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/194-using-highcharts-with-angular-js\/","title":{"rendered":"Using Angular.js with Highcharts"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>&nbsp;<br \/>\nAngularJS is a popular client-side framework for web applications. It provides enhanced HTML functionality, data binding, MVC pattern structure, routing support, and much more. In this article, we will go over some of the ways Highcharts can be used with AngularJS.<\/p>\n<p>In its simplest form, Highcharts can be loaded and initialized in pure JavaScript from within an Angular controller or in plain JavaScript. The code below shows an example of a webpage using Highcharts (<a title=\"Highcharts demo using AngularJS\" href=\"https:\/\/jsfiddle.net\/highcharts\/qyntd1xa\/\">jsFiddle\u00a0demo<\/a>)<\/p>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" width=\"100%\" height=\"550\" src=\"\/\/jsfiddle.net\/mushigh\/oy4jgqh9\/embedded\/result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\"><\/iframe>\n<\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html ng-app=\"myModule\"&gt;\r\n&lt;head&gt;\r\n    &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.5\/angular.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/code.highcharts.com\/highcharts.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-controller=\"myController\"&gt;\r\n    &lt;div id=\"container\"&gt;Placeholder for chart&lt;\/div&gt;\r\n    &lt;script&gt;\r\n    \tangular.module('myModule', [])\r\n    \t\t.controller('myController', function ($scope) {\r\n\t\t\t\tHighcharts.chart('container', {\r\n\r\n\t\t\t\t    xAxis: {\r\n\t\t\t\t        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', \r\n\t\t\t\t            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\r\n\t\t\t\t    },\r\n\r\n\t\t\t\t    series: [{\r\n\t\t\t\t        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\r\n\t\t\t\t    }]\r\n\t\t\t\t});\r\n    \t\t});\r\n    &lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>The code above is not optimal since it does not separate the presentation code from logic and data. It also does not take advantage of the extra functionality provided by Angular, such as data binding, for example. One approach to optimizing the code is to write a simple custom Angular directive for Highcharts. This would allow us to follow Angular&#8217;s patterns for code separation and reuse. A generic directive might take chart options as an argument. A second approach would be to write a directive for each chart template used, providing the data as an argument. Check the following example to learn more about how to use a custom Angular directive for Highcharts (<a title=\"Highcharts demo using AngularJS\" href=\"https:\/\/jsfiddle.net\/highcharts\/gwukyjhj\/\">jsFiddle demo<\/a>):<\/p>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" width=\"100%\" height=\"880\" src=\"\/\/jsfiddle.net\/mushigh\/dacyv901\/embedded\/result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\"><\/iframe>\n<\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html ng-app=\"myModule\"&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"utf-8\" \/&gt;\r\n    &lt;title&gt; Highcharts directive demo &lt;\/title&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.5\/angular.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"https:\/\/code.highcharts.com\/highcharts.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-controller=\"myController\"&gt;\r\n\r\n     &lt;hc-chart options=\"chartOptions\"&gt;Placeholder for generic chart&lt;\/hc-chart&gt;\r\n     &lt;hc-pie-chart title=\"Browser usage\" data=\"pieData\"&gt;Placeholder for pie chart&lt;\/hc-pie-chart&gt;\r\n\r\n    &lt;script&gt;\r\n        angular.module('myModule', [])\r\n            \/\/ Directive for generic chart, pass in chart options\r\n            .directive('hcChart', function () {\r\n                return {\r\n                    restrict: 'E',\r\n                    template: '&lt;div&gt;&lt;\/div&gt;',\r\n                    scope: {\r\n                        options: '='\r\n                    },\r\n                    link: function (scope, element) {\r\n                        Highcharts.chart(element[0], scope.options);\r\n                    }\r\n                };\r\n            })\r\n            \/\/ Directive for pie charts, pass in title and data only    \r\n            .directive('hcPieChart', function () {\r\n                return {\r\n                    restrict: 'E',\r\n                    template: '&lt;div&gt;&lt;\/div&gt;',\r\n                    scope: {\r\n                        title: '@',\r\n                        data: '='\r\n                    },\r\n                    link: function (scope, element) {\r\n                        Highcharts.chart(element[0], {\r\n                            chart: {\r\n                                type: 'pie'\r\n                            },\r\n                            title: {\r\n                                text: scope.title\r\n                            },\r\n                            plotOptions: {\r\n                                pie: {\r\n                                    allowPointSelect: true,\r\n                                    cursor: 'pointer',\r\n                                    dataLabels: {\r\n                                        enabled: true,\r\n                                        format: '&lt;b&gt;{point.name}&lt;\/b&gt;: {point.percentage:.1f} %'\r\n                                    }\r\n                                }\r\n                            },\r\n                            series: [{\r\n                                data: scope.data\r\n                            }]\r\n                        });\r\n                    }\r\n                };\r\n            })\r\n            .controller('myController', function ($scope) {\r\n                \r\n                \/\/ Sample options for first chart\r\n                $scope.chartOptions = {\r\n                    title: {\r\n                        text: 'Temperature data'\r\n                    },\r\n                    xAxis: {\r\n                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', \r\n                            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\r\n                    },\r\n\r\n                    series: [{\r\n                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\r\n                    }]\r\n                };\r\n\r\n                \/\/ Sample data for pie chart\r\n                $scope.pieData = [{\r\n                        name: \"Microsoft Internet Explorer\",\r\n                        y: 56.33\r\n                    }, {\r\n                        name: \"Chrome\",\r\n                        y: 24.03,\r\n                        sliced: true,\r\n                        selected: true\r\n                    }, {\r\n                        name: \"Firefox\",\r\n                        y: 10.38\r\n                    }, {\r\n                        name: \"Safari\",\r\n                        y: 4.77\r\n                    }, {\r\n                        name: \"Opera\",\r\n                        y: 0.91\r\n                    }, {\r\n                        name: \"Proprietary or Undetectable\",\r\n                        y: 0.2\r\n                }]\r\n            });\r\n    &lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>The above example could also be expanded using Angular&#8217;s watch functionality. In combination with its data binding, this could allow changes in the underlying data to update automatically the chart.<\/p>\n<p>There are several more complex open source Angular directives for Highcharts. Learn more about the most popular directive for Highcharts. This directive is not maintained or officially supported by Highcharts, but remains popular among Highcharts\u2019 developers and users.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AngularJS is a popular client side framework for web applications. It provides enhanced HTML functionality, data binding, MVC pattern structure, routing support and much more. In this article we will go over some of the ways Highcharts can be used with AngularJS.<\/p>\n","protected":false},"author":32,"featured_media":21837,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105],"tags":[822,1094,1031],"coauthors":[699],"class_list":["post-5240","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-angular","tag-highcharts-core","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/5240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=5240"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/5240\/revisions"}],"predecessor-version":[{"id":29035,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/5240\/revisions\/29035"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21837"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=5240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=5240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=5240"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=5240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}