{"id":16414,"date":"2018-05-03T14:18:32","date_gmt":"2018-05-03T12:18:32","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=16414"},"modified":"2026-01-12T09:51:20","modified_gmt":"2026-01-12T09:51:20","slug":"highcharts-angular-wrapper","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/highcharts-angular-wrapper\/","title":{"rendered":"Highcharts Angular Wrapper"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>Angular\u00a0has become the JavaScript framework of choice for many developers. It offers many modern conveniences such as databinding, easy third party integrations, and overall less coding for developers. As a convenience to our customers, we wanted to ensure that using Highcharts in an Angular project was as easy as possible. We are therefore happy to present to you our official <a href=\"https:\/\/github.com\/highcharts\/highcharts-angular\">Highcharts Angular wrapper<\/a>, which is <a href=\"https:\/\/github.com\/highcharts\/highcharts-angular\/blob\/master\/LICENSE\">free<\/a> to use (please note that using Highcharts for commercial projects require a valid license).<\/p>\n<p>Let\u2019s take a quick look at the wrapper along with the included demo app.<\/p>\n<p><i><b>Remark<\/b><br \/>\nBe sure you have node, npm, and Angular up to date. The following demo app was tested with:<\/i><\/p>\n<ul>\n<li>node 6.10.2+<\/li>\n<li>npm 4.6.1+\/li&gt;<\/li>\n<li>@angular\/cli 1.0.1+\/li&gt;<\/li>\n<\/ul>\n<h2>Run the demo<\/h2>\n<p>The first thing to do is to open the terminal, create a folder to save the work, then clone or download the content of the following <a href=\"https:\/\/github.com\/highcharts\/highcharts-angular#installing\">Github repository<\/a>.<\/p>\n<p>Run this command to install the dependencies <code>npm install<\/code>, and this command to start the demo <code>npm start<\/code><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-16415 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/05\/03134713\/npm-install.png\" alt=\"\" width=\"563\" height=\"70\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/05\/03134713\/npm-install.png 563w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/05\/03134713\/npm-install-560x70.png 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/05\/03134713\/npm-install-360x45.png 360w\" sizes=\"auto, (max-width: 563px) 100vw, 563px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-16416 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/05\/03134726\/npm-start.png\" alt=\"\" width=\"563\" height=\"70\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/05\/03134726\/npm-start.png 563w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/05\/03134726\/npm-start-560x70.png 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/05\/03134726\/npm-start-360x45.png 360w\" sizes=\"auto, (max-width: 563px) 100vw, 563px\" \/><\/p>\n<p>The result should be as follows:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16418\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/05\/03135302\/HighchartsAngularWrapper.gif\" alt=\"\" width=\"1280\" height=\"720\" \/><\/p>\n<h2>Explanations<\/h2>\n<p>Let\u2019s see what\u2019s going on here.<\/p>\n<p>Browse to the directory for the demo code, then open the <code>app.module.ts<\/code> file:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-16417 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/05\/03134918\/browse-to-the-demo-app.png\" alt=\"\" width=\"640\" height=\"320\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/05\/03134918\/browse-to-the-demo-app.png 640w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/05\/03134918\/browse-to-the-demo-app-560x280.png 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/05\/03134918\/browse-to-the-demo-app-360x180.png 360w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>Notice that the main component <a href=\"https:\/\/github.com\/highcharts\/highcharts-angular\/blob\/8e7b8bf3858dbdc756bcdc0c2772325fb533a540\/src\/app\/highcharts-chart.component.ts\">HighchartsChartComponent<\/a> is added to the app module <code>app.module.ts<\/code>. It provides the interface between Angular and Highcharts.<\/p>\n<pre>import { HighchartsChartComponent } from 'highcharts-angular';\r\n@NgModule({\r\n  declarations: [\r\n    HighchartsChartComponent,\r\n    ...<\/pre>\n<p>To generate a chart with Highcharts, you need first to import the Highcharts module using the following command <code>npm install highcharts --save<\/code>, then add it to the app.component.ts file:<br \/>\n<code>import * as Highcharts from 'highcharts';<\/code><br \/>\nNow, it is time to add the Highcharts-angular selector in the same file:<\/p>\n<pre>&lt;highcharts-chart \r\n  [Highcharts]=\"Highcharts\"\r\n\r\n  [constructorType]=\"chartConstructor\"\r\n  [options]=\"chartOptions\"\r\n  [callbackFunction]=\"chartCallback\"\r\n\r\n  [(update)]=\"updateFlag\"\r\n  [oneToOne]=\"oneToOneFlag\"\r\n\r\n  style=\"width: 100%; height: 400px; display: block;\"\r\n&gt;&lt;\/highcharts-chart&gt;<\/pre>\n<p>The selector defines the HTML element, which is later changed by the wrapper, into a chart.<\/p>\n<p>Notice the variables between the quotations such as <code>\"chartConstructor\"<\/code>,<code>\"chartOptions\"<\/code>, etc. Those variables are options set in the export class <code>AppCompoenent<\/code>:<\/p>\n<pre>export class AppComponent {\r\n  Highcharts = Highcharts; \/\/ required\r\n  chartConstructor = 'chart'; \/\/ optional string, defaults to 'chart'\r\n  chartOptions = { ... }; \/\/ required\r\n  chartCallback = function (chart) { ... } \/\/ optional function, defaults to null\r\n  updateFlag = false; \/\/ optional boolean\r\n  oneToOneFlag = true; \/\/ optional boolean, defaults to false\r\n  ...<\/pre>\n<p>For more details about each option, click on the following <a href=\"https:\/\/github.com\/highcharts\/highcharts-angular#options-details\">link<\/a>.<br \/>\nThat\u2019s all there is to it! Feel free to explore the code by setting up demos with different charts, and share your experience and questions in the comment area.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Highcharts plays very nice with Angular, especially when you use the official Highcharts Angular wrapper. <\/p>\n","protected":false},"author":225,"featured_media":21953,"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":[749],"class_list":["post-16414","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\/16414","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\/225"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16414"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/16414\/revisions"}],"predecessor-version":[{"id":29131,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/16414\/revisions\/29131"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21953"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16414"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}