{"id":22684,"date":"2022-07-06T11:01:07","date_gmt":"2022-07-06T11:01:07","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=22684"},"modified":"2026-01-13T11:25:09","modified_gmt":"2026-01-13T11:25:09","slug":"highcharts-with-angular-v14","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/highcharts-with-angular-v14\/","title":{"rendered":"Highcharts with Angular V14"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-c5bbea69 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<p>With the release of angular version 14, standalone components have been introduced, and <a href=\"https:\/\/angular.io\/api\/core\/NgModule\" target=\"_blank\" rel=\"noopener\">NgModule<\/a> became optional; facilitating a new way of building and structuring the codebase.<\/p>\n\n\n\n<p>In this article, we will create a chart and see how to use and integrate angular standalone components along with the <a href=\"https:\/\/github.com\/highcharts\/highcharts-angular\" target=\"_blank\" rel=\"noopener\">official Highcharts Angular wrapper<\/a>.<\/p>\n\n\n\n<p>Let\u2019s get started \ud83d\ude42<\/p>\n\n\n\n<p>To create a project with the latest version of Angular, for starters update the angular-cli package with the following commands:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code><code>npm uninstall -g @angular\/cli \t<\/code>\n<code>npm install -g @angular\/cli@latest<\/code><\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>For this project, we are using:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Angular 14.<\/li>\n\n\n\n<li>Highcharts V10.1.0.<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts-angular\" target=\"_blank\" rel=\"noopener\">Highcharts-Angular<\/a>.<\/li>\n<\/ul>\n\n\n\n<p>The project is set up using an Angular application environment and workspace with the following settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node: 14.17.0<\/li>\n\n\n\n<li>npm 8.3.1<\/li>\n\n\n\n<li>Angular CLI: 14.0.2.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Set up an Angular project with Highcharts<\/h2>\n\n\n\n<div class=\"wp-block-highsoft-hs-list hs-list-block\" data-bullet-type=\"number\" style=\"--icon-width:24px;--icon-height:24px;--item-spacing:auto\"><ol class=\"hs-list\"><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">1.<\/span><p class=\"hs-list__text \"> If you are unfamiliar with this type of environment, the official Angular documentation describes how to set up a <a href=\"https:\/\/angular.io\/guide\/setup-local\" target=\"blank\" rel=\"noopener\">local environment workspace<\/a>, and more about the <a href=\"https:\/\/angular.io\/guide\/standalone-components\" target=\"blank\" rel=\"noopener\">standalone component<\/a>.<\/p><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">2.<\/span><p class=\"hs-list__text \">To install <code>highcharts-angular<\/code> and the Highcharts library run the following instruction: <code>npm install highcharts-angular --save<\/code>.<\/p><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">3.<\/span><p class=\"hs-list__text \">To import the package go to <code>app.module.ts<\/code> file and import the module <code>HighchartsChartModule<\/code> from the <code>highcharts-angular<\/code> package.<\/p><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">4.<\/span><p class=\"hs-list__text \">To build Highcharts charts, install Highcharts: <code>npm install highcharts --save<\/code>.<\/p><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">5.<\/span><p class=\"hs-list__text \">We are declaring <code>app.compoent.ts<\/code> as a standalone component and importing the <code>HighchartsChartModule<\/code> inside imports array instead of NgModule (optional). Application level dependencies such as routes, dependency injection configure in the main.ts and component level in <code>app.component.ts<\/code> or any other component.<\/p><\/li><\/ol><\/div>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>@Component({\n  selector: 'my-app',\n  templateUrl: '.\/app.component.html',\n  styleUrls: &#91;'.\/app.component.css'],\n  standalone: true,\n  imports: &#91;HighchartsChartModule],\n})<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>6. Bootstrap the app from <code>main.ts<\/code>.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>import \".\/polyfills\";\nimport { bootstrapApplication } from \"@angular\/platform-browser\";\nimport { AppComponent } from \".\/app\/app.component\";\nbootstrapApplication(AppComponent);<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>7. Click on this <a href=\"https:\/\/stackblitz.com\/edit\/angular14-standaone-components-highcharts?file=src%2Fapp%2Fapp.component.ts\" target=\"_blank\" rel=\"noopener\">Stackblitz project<\/a> to find the complete working example with code. Here is the final result:<br><\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-image\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/07\/06100111\/Highcharts-and-Angular-14.gif\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n\n<p>Feel free to share your thoughts and questions in the comments below.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create an interactive chart with Highcharts and Angular 14  via node.<\/p>\n","protected":false},"author":249,"featured_media":22691,"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":[779],"class_list":["post-22684","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\/22684","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\/249"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=22684"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22684\/revisions"}],"predecessor-version":[{"id":28687,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22684\/revisions\/28687"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/22691"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=22684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=22684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=22684"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=22684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}