{"id":13983049,"url":"https://github.com/highcharts/highcharts-angular","last_synced_at":"2026-01-26T10:06:43.675Z","repository":{"id":37663438,"uuid":"104908924","full_name":"highcharts/highcharts-angular","owner":"highcharts","description":"Highcharts official integration for Angular","archived":false,"fork":false,"pushed_at":"2026-01-23T07:53:23.000Z","size":992,"stargazers_count":439,"open_issues_count":12,"forks_count":121,"subscribers_count":28,"default_branch":"master","last_synced_at":"2026-01-24T00:52:33.324Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/highcharts.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-09-26T16:15:51.000Z","updated_at":"2026-01-23T07:50:24.000Z","dependencies_parsed_at":"2025-06-23T08:23:15.095Z","dependency_job_id":"750b0b5e-c8ae-491a-a785-385f2da882bc","html_url":"https://github.com/highcharts/highcharts-angular","commit_stats":{"total_commits":188,"total_committers":20,"mean_commits":9.4,"dds":0.6595744680851063,"last_synced_commit":"ab095ccaa07e5014a1e667506203bcb0c09f4d6a"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/highcharts/highcharts-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highcharts%2Fhighcharts-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highcharts%2Fhighcharts-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highcharts%2Fhighcharts-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highcharts%2Fhighcharts-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/highcharts","download_url":"https://codeload.github.com/highcharts/highcharts-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highcharts%2Fhighcharts-angular/sbom","scorecard":{"id":464410,"data":{"date":"2025-08-11","repo":{"name":"github.com/highcharts/highcharts-angular","commit":"63f43627690cb8b67727f67be6f237eaa32eb2fc"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":5.4,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":10,"reason":"26 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":6,"reason":"Found 5/8 approved changesets -- score normalized to 6","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/main.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:8: update your workflow using https://app.stepsecurity.io/secureworkflow/highcharts/highcharts-angular/main.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/highcharts/highcharts-angular/main.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/highcharts/highcharts-angular/main.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/highcharts/highcharts-angular/main.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/highcharts/highcharts-angular/main.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/highcharts/highcharts-angular/main.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/highcharts/highcharts-angular/main.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/highcharts/highcharts-angular/main.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/main.yml:11","Warn: npmCommand not pinned by hash: .github/workflows/main.yml:21","Warn: npmCommand not pinned by hash: .github/workflows/main.yml:31","Warn: npmCommand not pinned by hash: .github/workflows/main.yml:39","Info:   0 out of   8 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   4 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":9,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Warn: project license file does not contain an FSF or OSI license."],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 27 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-19T12:05:07.905Z","repository_id":37663438,"created_at":"2025-08-19T12:05:07.905Z","updated_at":"2025-08-19T12:05:07.905Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28774298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T09:42:00.929Z","status":"ssl_error","status_checked_at":"2026-01-26T09:42:00.591Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-09T05:01:36.637Z","updated_at":"2026-01-26T10:06:43.655Z","avatar_url":"https://github.com/highcharts.png","language":"JavaScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Charts"],"readme":"# Highcharts Angular\n\nOfficial minimal Highcharts integration for Angular.\n\n## Table of Contents\n\n1. [Getting Started](#getting-started)\n   1. [General Prerequisites](#general-prerequisites)\n   2. [Installing](#installing)\n   3. [Usage](#usage)\n   4. [SSR Support](#ssr-support)\n   5. [Angular Elements and `useHTML`](#angular-elements-and-usehtml)\n   6. [Upgrade to v5](#upgrade-to-v5)\n2. [Options Details](#options-details)\n3. [Chart Instance](#chart-instance)\n4. [Highcharts Partial Loading on the Component Level](#highcharts-partial-loading-on-the-component-level)\n   1. [Loading a Module](#to-load-a-module)\n   2. [Loading a Map for Highcharts Maps](#to-load-a-map-for-highcharts-maps)\n   3. [Loading a Map for Highcharts Stock](#to-load-a-stock-for-highcharts)\n   4. [Loading a Wrapper](#to-load-a-wrapper)\n5. [Demo App](#demo-app)\n   1. [Play with the App](#play-with-the-app)\n   2. [Files to Modify](#files-to-play-with)\n6. [Release](#release)\n7. [Help and FAQ](#help-and-faq)\n\n---\n\n## Getting Started\n\n### General Prerequisites\n\nEnsure that **Node.js**, **npm**, and **Angular** are installed and up to date. Refer to the compatibility table below for the required versions:\n\n| Highcharts Angular Version | Node.js  | Angular  | Highcharts | Documentation                                                                    |\n| -------------------------- | -------- | -------- | ---------- | -------------------------------------------------------------------------------- |\n| 5.0.0                      | \u003e=18.19  | \u003e=19.0.0 | \u003e=12.2.0   | [README](https://github.com/highcharts/highcharts-angular/blob/v5.0.0/README.md) |\n| 4.0.0                      | \u003e=16.14  | \u003e=16.0.0 | \u003e=11.0.0   | [README](https://github.com/highcharts/highcharts-angular/blob/v4.0.1/README.md) |\n| 3.1.2                      | \u003e=14.13  | \u003e=15.0.0 | \u003e=10.3.3   | [README](https://github.com/highcharts/highcharts-angular/blob/v3.1.2/README.md) |\n| 3.0.0                      | \u003e=14.13  | \u003e=9.0.0  | \u003e=8.0.0    | [README](https://github.com/highcharts/highcharts-angular/blob/v3.0.0/README.md) |\n| \u003c2.10.0                    | \u003e=6.10.2 | \u003e=6.0.0  | \u003e=6.0.0    | [README](https://github.com/highcharts/highcharts-angular/blob/v2.9.0/README.md) |\n\n---\n\n### Installing\n\nInstall the `highcharts-angular` package along with the [highcharts](https://www.highcharts.com/docs/getting-started/install-from-npm) dependency:\n\n```bash\nnpm install highcharts-angular highcharts --save\n```\n\nThen, provide Highcharts with minimal configuration in your `app.config.ts` file:\n\n```ts\nimport { provideHighcharts } from 'highcharts-angular';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHighcharts(),\n    // Other providers here ...\n  ],\n};\n```\n\nOr, alternatively, provide global configuration for all charts within your project:\n\n```ts\nimport { provideHighcharts } from 'highcharts-angular';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHighcharts({\n      // Optional: Define the Highcharts instance dynamically\n      instance: () =\u003e import('highcharts'),\n\n      // Global chart options applied across all charts\n      options: {\n        title: {\n          style: {\n            color: 'tomato',\n          },\n        },\n        legend: {\n          enabled: false,\n        },\n      },\n\n      // Include Highcharts additional modules (e.g., exporting, accessibility) or custom themes\n      modules: () =\u003e {\n        return [\n          import('highcharts/esm/modules/accessibility'),\n          import('highcharts/esm/modules/exporting'),\n          import('highcharts/esm/themes/sunset'),\n        ];\n      },\n    }),\n    // Other providers here ...\n  ],\n};\n```\n\n### Usage\n\nYou can use Highcharts in your Angular application either as a **Component** or a **Directive**. Below are the usage examples for both approaches:\n\n---\n\n#### 1. Using the Component\n\nIn your `app.component.ts`, import the required `HighchartsChartComponent` and other relevant types at the top of the file:\n\n```ts\nimport { Component } from '@angular/core';\nimport { HighchartsChartComponent, ChartConstructorType } from 'highcharts-angular';\n\n@Component({\n  template: `\n    \u003chighcharts-chart\n      [constructorType]=\"chartConstructor\"\n      [options]=\"chartOptions\"\n      class=\"chart\"\n    /\u003e\n  `,\n  styles: [`.chart { width: 100%; height: 400px; display: block; }`],\n  imports: [HighchartsChartComponent]\n})\nexport class AppComponent {\n  chartOptions: Highcharts.Options = { ... }; // Required\n  chartConstructor: ChartConstructorType = 'chart'; // Optional, defaults to 'chart'\n}\n```\n\n#### 2. Using the Directive\n\nIn your `app.component.ts`, import the `HighchartsChartDirective` and other relevant types at the top of the file:\n\n```ts\nimport {Component} from '@angular/core';\nimport { HighchartsChartDirective, ChartConstructorType } from 'highcharts-angular';\n\n@Component({\n  template: `\n    \u003cdiv\n      highchartsChart\n      [constructorType]=\"chartConstructor\"\n      [options]=\"chartOptions\"\n      class=\"chart\"\n    \u003e\u003c/div\u003e\n  `,\n  styles: [`.chart { width: 100%; height: 400px; display: block; }`],\n  imports: [HighchartsChartDirective]\n})\nexport class AppComponent {\n  chartOptions: Highcharts.Options = { ... }; // Required\n  chartConstructor: ChartConstructorType = 'chart'; // Optional, defaults to 'chart'\n}\n```\n\n#### 3. Example\n\nThis is the minimum example you can start with:\n\n```ts\nimport { Component } from '@angular/core';\nimport { HighchartsChartDirective } from 'highcharts-angular';\n\n@Component({\n  template: ` \u003cdiv highchartsChart [options]=\"chartOptions\" class=\"chart\"\u003e\u003c/div\u003e `,\n  styles: [\n    `\n      .chart {\n        width: 100%;\n        height: 400px;\n        display: block;\n      }\n    `,\n  ],\n  imports: [HighchartsChartDirective],\n})\nexport class AppComponent {\n  chartOptions: Highcharts.Options = {\n    series: [\n      {\n        data: [1, 2, 3],\n        type: 'line',\n      },\n    ],\n  };\n}\n```\n\nBuild and run your Angular app to see a basic line chart.\n\nUsed options are explained [below](#options-details).\n\n### SSR Support\n\nBoth the component and directive in this library are fully compatible with Angular Universal (SSR).\n\nIn SSR, the code runs twice: once on the server (in an environment without a window object) and once in the browser. Since Highcharts is tightly integrated with browser events, it should not run on the server-side. But don’t worry—we’ve already handled this case for you! 😉\n\nOur showcase application includes an example of SSR integration. You can try it by running:\n\n```cli\nng serve my-ssr-app --open\n```\n\n### Highcharts AST\n\nHighcharts sanitizes HTML/SVG content with its internal AST (Abstract Syntax Tree) parser. By default, only a safe list of attributes and tags is allowed. If you need to support custom attributes or elements (for example, to render extra data attributes), you must extend the AST configuration before Highcharts is initialized.\n\n```ts\nprovideHighcharts({\n    instance: () =\u003e\n    import('highcharts/esm/highcharts').then((m) =\u003e {\n        const Highcharts = m.default;\n\n        // Allow custom attributes\n        Highcharts.AST.allowedAttributes.push('custom-attribute');\n\n        // Allow custom elements\n        Highcharts.AST.allowedTags.push('my-custom-tag');\n\n        return Highcharts;\n    }),\n}),\n```\n\n### Angular Elements and useHTML\n\nFirst, install angular elements:\n\n```cli\nnpm install @angular/elements --save\n```\n\nInclude in main.ts file your element tag inside allowedTags and [element properties](https://angular.io/guide/elements#mapping) inside allowedAttributes:\n\n```ts\nif (Highcharts \u0026\u0026 Highcharts.AST) {\n  Highcharts.AST.allowedTags.push('translation-element');\n  Highcharts.AST.allowedAttributes.push('translation-key');\n}\n```\n\nDefine your element in the constructor of the component that will use it:\n\n```ts\nprivate defineTranslationElement() {\n  if (isNil(customElements.get('translation-element'))) {\n    const translationElement = createCustomElement(TranslationComponent, {injector: this.injector});\n    customElements.define('translation-element', translationElement);\n  }\n}\n```\n\nThen, create the element, set properties and use it in the chart:\n\n```ts\nconst translationEl: NgElement \u0026 WithProperties\u003cTranslationComponent\u003e = document.createElement(translationElementTag);\ntranslationEl.setAttribute('translation-key', 'shared.title');\n\nconst chartOptions: Highcharts.Options = {\n  title: {\n    text: translationEl.outerHTML,\n    useHTML: true,\n  },\n  ...\n}\n```\n\nFor a more detailed view take a look at the [Online Examples - Angular Elements and useHTML](#online-examples)\n\n### Upgrade to v5\n\nVersion 5 introduces significant improvements and changes to align with modern Angular practices. **Please review the following breaking changes before upgrading:**\n\n#### Breaking Changes\n\n- Dropped `HighchartsChartModule`. Replace your usage of `HighchartsChartModule` with the new `provideHighcharts()` and the standalone `HighchartsChartComponent` or `HighchartsChartDirective`.\n- Dropped `callbackFunction`. Replace your usage of `[callbackFunction]=\"myFunction\"` with `(chartInstance)=\"myFunction($event)\"`.\n- `chartInstance` will not emit at all during destruction anymore.\n\n## Options details\n\n| Parameter           | Type                   | Required | Defaults  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| ------------------- | ---------------------- | -------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `[constructorType]` | `ChartConstructorType` | No       | `'chart'` | A string for the [constructor method](https://www.highcharts.com/docs/getting-started/your-first-chart). Official constructors include: \u003cbr\u003e- `'chart'` for Highcharts charts \u003cbr\u003e- `'stockChart'` for Highcharts Stock \u003cbr\u003e- `'mapChart'` for Highcharts Maps \u003cbr\u003e- `'ganttChart'` for Highcharts Gantt \u003cbr\u003e\u003cbr\u003e Note that `'stockChart'`, `'mapChart'`, and `'ganttChart'` require loading the appropriate package or module.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |\n| `[options]`         | `Object`               | Yes      | `-`       | The chart options as described in the [Highcharts API reference](http://api.highcharts.com/highcharts). A minimal working object for basic testing is `{ series:[{ data:[1, 2] }] }`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |\n| `[(update)]`        | `Boolean`              | No       | `-`       | **Deprecated.** A boolean to trigger a chart update. Angular does not detect nested changes in objects passed to a component. Set the corresponding variable (`updateFlag` in the example) to `true`, and after the update is done, it will asynchronously change back to `false` by the Highcharts Angular component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |\n| `[oneToOne]`        | `Boolean`              | No       | `false`   | **Deprecated.** The `oneToOne` parameter for [updates](https://api.highcharts.com/class-reference/Highcharts.Chart#update). When `true`, the `series`, `xAxis`, and `yAxis` collections will be updated one to one, and items will be added or removed to match the updated options. For example, if a chart has **two** series, calling `chart.update` with a configuration containing **three** series will add **one**. Similarly, calling `chart.update` with **one** series will remove **one**. Setting an empty series array removes all series, while leaving out the `series` property leaves them untouched. If the series have `id`s, new series options will be matched by `id`, and the remaining ones will be removed. \u003cbr\u003e\u003cbr\u003e This option is demonstrated in [the demo](#demo-app). Try setting new chart options with different numbers of series in the [textarea input](https://github.com/highcharts/highcharts-angular/blob/36e158e684b5823e1b1bd1cedf75548022eba1a9/src/app/app.component.html#L7) to see it in action. |\n\n## Chart instance\n\nA chart instance can be obtained using the following methods:\n\n- **Component output `chartInstance`** - Emitted after the chart is created (see [demo app](#demo-app) and the `logChartInstance` function).\n- **Chart's events** - The context of all [chart's events](https://api.highcharts.com/highcharts/chart.events) functions is the chart instance.\n\n**Note:** If you are obtaining the chart instance from the **[chart's load event](https://api.highcharts.com/highcharts/chart.events.load)**, and you plan to support exporting, the function will run again when the chart is exported. This is because a separate chart is created for export. To distinguish between the main chart and the export chart, you can check `chart.renderer.forExport`. It will be set to `true` for the export chart and `undefined` for the main chart.\n\n# Highcharts Partial Loading on the Component Level\n\nA Highcharts instance is optionally initialized with **[modules](#to-load-a-module)**, **[maps](#to-load-a-map-for-Highcharts-Maps)**, **[wrappers](#to-load-a-wrapper)**, and set **[global options](#to-use-setoptions)** using **[`setOptions`](https://www.highcharts.com/docs/getting-started/how-to-set-options#2)**. **The core is required.**\n\n**Note:** The Highcharts instance is shared across components in an Angular app, meaning that loaded modules will affect all charts.\n\nSince highcharts-angular 5.0.0, you can provide extra modules on demand to your chart at the component level:\n\n## Example\n\n### To load a module\n\nA module is a Highcharts official addon - including Highcharts Stock [Technical Indicators](https://www.highcharts.com/docs/stock/technical-indicator-series), style [themes](https://www.highcharts.com/docs/chart-design-and-style/themes), specialized series types (e.g. [Bullet](https://www.highcharts.com/docs/chart-and-series-types/bullet-chart), [Venn](https://www.highcharts.com/docs/chart-and-series-types/venn-series)).\n\nAfter importing Highcharts, Highcharts Stock, or Highcharts Maps, use `providePartialHighcharts` and initialize modules with an array of Highcharts factory functions.\n\nIf a lack of TypeScript definitions `d.ts` is showing as an error - see [Solving problems](https://www.highcharts.com/docs/advanced-chart-features/highcharts-typescript-declarations) section of Highcharts documentation for TypeScript usage.\n\n```ts\nimport { Component } from '@angular/core';\nimport { HighchartsChartDirective } from 'highcharts-angular';\n\n@Component({\n  template: ` \u003cdiv highchartsChart [options]=\"chartOptions\" class=\"chart\"\u003e\u003c/div\u003e `,\n  styles: [\n    `\n      .chart {\n        width: 100%;\n        height: 400px;\n        display: block;\n      }\n    `,\n  ],\n  imports: [HighchartsChartDirective],\n  providers: [\n    providePartialHighcharts({\n      modules: () =\u003e {\n        return [\n          // Load Gantt Chart\n          import('highcharts/esm/modules/gantt'),\n          // Load exporting module\n          import('highcharts/esm/modules/exporting'),\n        ];\n      },\n      timeout: 900, // Optional: increase timeout for loading modules\n    }),\n  ],\n})\nexport class GanttComponent {\n  chartOptions: Highcharts.Options = {\n    series: [\n      {\n        data: [1, 2, 3],\n        type: 'line',\n      },\n    ],\n  };\n}\n```\n\n### To load a map for Highcharts Maps\n\nOfficial map collection is published and [here](https://www.npmjs.com/package/@highcharts/map-collection#install-from-npm) are basic instructions for loading a map. A full example can also be found in the [demo app](#demo-app).\n\n```ts\nimport { Component } from '@angular/core';\nimport { HighchartsChartDirective } from 'highcharts-angular';\n\n@Component({\n  template: ` \u003cdiv highchartsChart [options]=\"chartOptions\" class=\"chart\"\u003e\u003c/div\u003e `,\n  styles: [\n    `\n      .chart {\n        width: 100%;\n        height: 400px;\n        display: block;\n      }\n    `,\n  ],\n  imports: [HighchartsChartDirective],\n  providers: [providePartialHighcharts({ modules: () =\u003e [import('highcharts/esm/modules/map')] })],\n})\nexport class MapComponent {\n  chartOptions: Highcharts.Options = {\n    series: [\n      {\n        data: [1, 2, 3],\n        type: 'line',\n      },\n    ],\n  };\n}\n```\n\n### To load a stock for Highcharts\n\n```ts\nimport { Component } from '@angular/core';\nimport { HighchartsChartDirective } from 'highcharts-angular';\n\n@Component({\n  template: ` \u003cdiv highchartsChart [options]=\"chartOptions\" class=\"chart\"\u003e\u003c/div\u003e `,\n  styles: [\n    `\n      .chart {\n        width: 100%;\n        height: 400px;\n        display: block;\n      }\n    `,\n  ],\n  imports: [HighchartsChartDirective],\n  providers: [providePartialHighcharts({ modules: () =\u003e [import('highcharts/esm/modules/stock')] })],\n})\nexport class StockComponent {\n  chartOptions: Highcharts.Options = {\n    series: [\n      {\n        data: [1, 2, 3],\n        type: 'line',\n      },\n    ],\n  };\n}\n```\n\n**Note:**\n\n- Some Highcharts modules have dependencies and must be loaded in a specific order.\n- In such cases, use a promise chain (e.g., `import('highcharts/esm/highcharts-more').then(() =\u003e import('highcharts/esm/modules/dumbbell'))`)\n- instead of just listing them as array items. This ensures the dependent module loads only after its dependency.\n\n### To load a wrapper\n\nA wrapper is a [custom extension](https://www.highcharts.com/docs/extending-highcharts/extending-highcharts) for Highcharts. To load a wrapper in the same way as a module, save it as a JavaScript file and add the following code to the beginning and end of the file:\n\n```js\n(function (factory) {\n  if (typeof module === 'object' \u0026\u0026 module.exports) {\n    module.exports = factory;\n  } else {\n    factory(Highcharts);\n  }\n}(function (Highcharts) {\n\n...\n/* wrapper code */\n...\n\n}));\n```\n\nNext, you will be loading a local `.js` file, so add `allowJs: true` to the `tsconfig.json` in your app:\n\n```json\n{\n  \"compilerOptions\": {\n    \"allowJs\": true\n  }\n}\n```\n\nThe wrapper is now ready to be imported into your app. Use `require` instead of `import` to prevent TS5055 errors:\n\n```ts\nimport { Component } from '@angular/core';\nimport { HighchartsChartDirective } from 'highcharts-angular';\n\n@Component({\n  template: ` \u003cdiv highchartsChart [options]=\"chartOptions\" class=\"chart\"\u003e\u003c/div\u003e `,\n  styles: [\n    `\n      .chart {\n        width: 100%;\n        height: 400px;\n        display: block;\n      }\n    `,\n  ],\n  imports: [HighchartsChartDirective],\n  providers: [\n    providePartialHighcharts({ modules: () =\u003e [import('./relative-path-to-the-wrapper-file/wrapper-file-name')] }),\n  ],\n})\nexport class StockComponent {\n  chartOptions: Highcharts.Options = {\n    series: [\n      {\n        data: [1, 2, 3],\n        type: 'line',\n      },\n    ],\n  };\n}\n```\n\nWhere `relative-path-to-the-wrapper-file` is the relative path (from the module importing the wrapper) to the wrapper file, and `wrapper-file-name` is the name of the wrapper file.\n\nIf TypeScript definitions (`d.ts`) are missing and causing errors, see the [Solving problems](https://www.highcharts.com/docs/advanced-chart-features/highcharts-typescript-declarations) section of the Highcharts documentation for TypeScript usage.\n\n## Demo app\n\nDownload (or clone) the contents of the **[highcharts-angular](https://github.com/highcharts/highcharts-angular)** GitHub repository.  \nThe demo app does not rely on external dependencies but instead builds the `highcharts-angular` package, so it's necessary to run `npm start` to generate this package.\n\nIn your system console, in the main repo folder, run:\n\n```cli\nnpm install\n```\n\n1. Start Default:\n\n```cli\nnpm start\n```\n\n2. Start with SSR:\n\n```cli\nnpm start:ssr\n```\n\nThe command `npm start` will launch the default app, while `npm start:ssr` will start the server-side rendering (SSR) version. Both versions can be accessed at [http://localhost:4200/](http://localhost:4200/) in your default browser.\n\nTo open the app on a different port (e.g., `12345`), use:\n\n```cli\nnpm start -- --port 12345\n```\n\n### Play with the app\n\nKeep the console running, and modify files — after saving, the app will automatically rebuild and refresh in the localhost preview.\n\n### Files to play with\n\n- **app.component.ts** (located in `src\\app`)\n\nThis file contains the main Angular component, which utilizes different components like _line-chart_, _gantt-chart_, _map-chart_, and _stock-chart_.\n\n## Release\n\nUsing Angular CLI v19, the library must be manually rebuilt on each change in order to reflect in the demo app.\n\nRun the following command on each change to the `highcharts-chart.directive.ts` file:\n\n```cli\nnpm run build\n```\n\nIf you are running the demo app in another terminal window when you rebuild the\nlibrary, the changes should be reflected in your browser (note: you may need to\nrefresh the browser a second time after the live reload in order to see the change).\n\nFor CHANGELOG.md update use :\n\n```cli\nnpm run release\n```\n\n## Help and FAQ\n\nFor technical support please contact [Highcharts technical support](https://www.highcharts.com/support).\n\nFor TypeScript problems with Highcharts first see [Highcharts documentation for TypeScript usage](https://www.highcharts.com/docs/advanced-chart-features/highcharts-typescript-declarations).\n\n### FAQ:\n\n#### How to add and use indicators?\n\nAdd [indicators](https://www.highcharts.com/docs/chart-and-series-types/technical-indicator-series) as any other module.\n\n#### How to add and use themes?\n\nAdd [themes](https://www.highcharts.com/docs/chart-design-and-style/themes) as any other module.\nSee the [demo app](#demo-app) in this repository for an example.\n\nMore info about custom themes in [Highcharts general documentation](https://www.highcharts.com/docs/chart-design-and-style/custom-themes-in-styled-mode).\n\n#### I have a general issue with Highcharts and TypeScript\n\nThe correct repository to report such issues is [main Highcharts repository](https://github.com/highcharts/highcharts/issues).\n\n#### Property `XXX` does not exist on type `YYY`\n\nIt is happening when you are trying to use non-existing property or one of our internal properties that are not publicly available for example `axis.dataMin`. To fix that you need to create your own type that will extend the default Highcharts one with the new properties. Then all you need to do is to cast the selected option / to the extended type.\n\n#### How to use Highcharts Maps with the proj4?\n\nInstall the `proj4` library and its types `@types/proj4`. Then pass it to `chartOptions.chart.proj4` property. See the [demo app](#demo-app) in this repository.\n\n#### I want to render angular component in the tooltip/axis formatter\n\nTo render angular component within the chart you can use the angular [portals](https://material.angular.io/cdk/portal/overview).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhighcharts%2Fhighcharts-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhighcharts%2Fhighcharts-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhighcharts%2Fhighcharts-angular/lists"}