{"id":24419,"date":"2023-11-07T10:04:32","date_gmt":"2023-11-07T10:04:32","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24419"},"modified":"2026-01-13T11:38:22","modified_gmt":"2026-01-13T11:38:22","slug":"angular-signals-highcharts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/angular-signals-highcharts\/","title":{"rendered":"Angular Signals with Highcharts"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<p>In this article, I will show you how to create an interactive chart using angular signals 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>But, what is Angular signals? Well, think of it as your app&#8217;s detective. It meticulously tracks how and where your app&#8217;s state is being used. This means Angular can now work its optimization magic when rendering updates and make your change detection techniques smarter. In simpler terms, it&#8217;s a performance boost for your Angular app.<\/p>\n\n\n\n<p>For those of you who like to get into the nitty-gritty details, you can read all about Signals in this comprehensive guide <a href=\"https:\/\/angular.io\/guide\/signals\" target=\"_blank\" rel=\"noopener\">Angular signals<\/a>.<\/p>\n\n\n\n<p>Let\u2019s get started \ud83d\ude42<br>For this project, we are using:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Angular 16.2.2.<\/li>\n\n\n\n<li>Highcharts V10.3.3.<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts-angular\" target=\"_blank\" rel=\"noopener\">Highcharts-Angular. V3.1.2<\/a>.<\/li>\n<\/ul>\n\n\n\n<p>To initiate a project using the most up-to-date Angular version, begin by updating the angular-cli package with the following commands:<br>Uninstall the existing Angular CLI package:<\/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>npm uninstall -g @angular\/cli<\/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>Install the latest version of Angular CLI:<\/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>npm install -g @angular\/cli@latest<\/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>These steps will ensure you&#8217;re working with the latest and greatest Angular tools for your project.<\/p>\n\n\n\n<p>Now, it is time to set up an Angular project with Highcharts.<\/p>\n\n\n\n<p>Btw, if you&#8217;re new to this environment, you can refer to the <a href=\"https:\/\/angular.io\/guide\/setup-local\" target=\"_blank\" rel=\"noopener\">official Angular documentation<\/a> for guidance on setting up your local workspace and gaining a deeper understanding of the <a href=\"https:\/\/angular.io\/guide\/standalone-components\" target=\"_blank\" rel=\"noopener\">standalone component<\/a>.<\/p>\n\n\n\n<p>To install the highcharts-angular package along with the Highcharts library, simply execute the following command:<\/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>npm install highcharts-angular --save<\/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>To create Highcharts charts, you&#8217;ll need to install Highcharts as well. You can do so by running the command:<\/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>npm install highcharts --save<\/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 a comprehensive working example complete with code, click on the &#8220;<a href=\"https:\/\/stackblitz.com\/edit\/angular-oluicg?file=src%2Fsignal-highcart%2Fsignal-highcart.component.ts\" target=\"_blank\" rel=\"noopener\">signal-highcharts<\/a>&#8221; link. Here, you&#8217;ll find the end result of the process.<\/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\/2023\/11\/07095946\/image1.gif\" alt=\"\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\"><strong>Related posts<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/maps-with-latitude-longitude-using-highcharts\/\">Maps with latitude longitude using Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/visualizing-geospatial-data-with-highcharts-maps\/\">Visualizing geospatial data with Highcharts Maps<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/lightning-map-create-your-own-using-highcharts\/\">Lightning map: create your own using Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/post\/choropleth-map-examples-using-highcharts\/\">Choropleth map examples using Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/javascript-maps-with-highcharts\/\">JavaScript maps with Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/map-library-by-highcharts\/\">Map library by Highcharts<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A step-by-step tutorial to learn how to use Angular Signals with Highcharts<\/p>\n","protected":false},"author":249,"featured_media":24439,"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,699],"class_list":["post-24419","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\/24419","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=24419"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24419\/revisions"}],"predecessor-version":[{"id":28646,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24419\/revisions\/28646"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24439"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24419"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}