├── .browserslistrc ├── .editorconfig ├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── angular.json ├── e2e ├── app.e2e-spec.ts ├── app.po.ts └── tsconfig.e2e.json ├── highcharts-angular ├── CHANGELOG.md ├── karma.conf.js ├── ng-package.json ├── ng-package.prod.json ├── package.json ├── src │ ├── lib │ │ ├── highcharts-chart.component.ts │ │ └── highcharts-chart.module.ts │ ├── public_api.ts │ └── test.ts ├── tsconfig.lib.json ├── tsconfig.lib.prod.json ├── tsconfig.spec.json └── tslint.json ├── index.js ├── js └── worldmap.js ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── src ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── apple-data.service.ts │ ├── gantt-chart │ │ ├── gantt-chart.component.css │ │ ├── gantt-chart.component.html │ │ └── gantt-chart.component.ts │ ├── lazy-loading-chart │ │ ├── lazy-loading-chart.component.css │ │ ├── lazy-loading-chart.component.html │ │ └── lazy-loading-chart.component.ts │ ├── line-chart │ │ ├── line-chart.component.css │ │ ├── line-chart.component.html │ │ └── line-chart.component.ts │ ├── map-chart │ │ ├── map-chart.component.css │ │ ├── map-chart.component.html │ │ └── map-chart.component.ts │ ├── stock-chart │ │ ├── stock-chart.component.css │ │ ├── stock-chart.component.html │ │ └── stock-chart.component.ts │ └── tests │ │ └── line-test │ │ ├── line-test.component.css │ │ ├── line-test.component.html │ │ ├── line-test.component.spec.ts │ │ └── line-test.component.ts ├── assets │ └── .gitkeep ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── global.d.ts ├── index.html ├── main.ts ├── polyfills.ts ├── test.ts └── typings.d.ts ├── tasks ├── build.js ├── publish.js └── release.js ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json /.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | not kaios 2.5, 14 | not op_mini all -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | > For general tech support, please see www.highcharts.com/support. 11 | > Please report only issues about `highcharts-angular` wrapper or content of this repository. 12 | > For general issues with Highcharts and TypeScript the correct repository to report such issues is [main Highcharts repository](https://github.com/highcharts/highcharts/issues). 13 | 14 | ### Describe the bug 15 | A clear and concise description of what is wrong. 16 | 17 | ### Expected behavior 18 | A clear and concise description of what you expected to happen. 19 | 20 | ### Demo 21 | Please provide live demo of the problem or provide any other way to recreate the problem. 22 | 23 | #### Steps required to recreate the problem in the demo: 24 | 1. ... 25 | 26 | ### Setup used 27 | - NodeJS version ... 28 | - Angular version ... 29 | - TypeScript version ... 30 | etc. 31 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | > For general tech support, please see www.highcharts.com/support. 11 | > Please report only issues about `highcharts-angular` wrapper or content of this repository. 12 | > For general issues with Highcharts and TypeScript the correct repository to report such issues is [main Highcharts repository](https://github.com/highcharts/highcharts/issues). 13 | 14 | ### Requested feature description 15 | A clear and concise description of what you expected to happen. 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.angular/cache 29 | /.sass-cache 30 | /connect.lock 31 | /coverage 32 | /libpeerconnection.log 33 | npm-debug.log 34 | testem.log 35 | /typings 36 | 37 | # e2e 38 | /e2e/*.js 39 | /e2e/*.map 40 | 41 | # System Files 42 | .DS_Store 43 | Thumbs.db 44 | 45 | # package-lock 46 | package-lock.json -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ## [4.0.1](https://github.com/highcharts/highcharts-angular/compare/v3.0.0...v4.0.1) (2024-07-23) 6 | 7 | ### Bug Fixes 8 | 9 | * Fixed #380, improved typing of the chartInstance emitter. ([b4751e5](https://github.com/highcharts/highcharts-angular/commit/b4751e5f915692f13a61f8b0fa8c4b428cdc9f30)) 10 | * Fixed #385, error when importing ESM module. ([832ca80](https://github.com/highcharts/highcharts-angular/commit/832ca80cf20ed5f9c18a992b2ac8e12040fbd708)) 11 | 12 | ## [4.0.0](https://github.com/highcharts/highcharts-angular/compare/v3.0.0...v4.0.0) (2023-11-07) 13 | 14 | ### Bug Fixes 15 | 16 | * Fix #365, the chat instance was not emitted on the `ngOnDestroy`.([344deb7](https://github.com/highcharts/highcharts-angular/pull/366/commits/344deb72b9dfbaefa6e14129bf5600920b582b3f)) 17 | 18 | ## [3.1.2](https://github.com/highcharts/highcharts-angular/compare/v3.0.0...v3.1.2) (2023-02-02) 19 | 20 | ## [3.1.0](https://github.com/highcharts/highcharts-angular/compare/v3.0.0...v3.1.0) (2023-02-02) 21 | 22 | ## [3.0.0](https://github.com/highcharts/highcharts-angular/compare/v2.10.0...v3.0.0) (2021-12-01) 23 | 24 | 25 | ### Features 26 | 27 | * Updated to Angular 13 ([aa202ec](https://github.com/highcharts/highcharts-angular/pull/305/commits/aa202ec98bb41bc85eb74229059adcc6398e3cc6) 28 | 29 | ## [2.10.0](https://github.com/highcharts/highcharts-angular/compare/v2.8.1...v2.10.0) (2021-02-09) 30 | 31 | ### Features 32 | 33 | * Updated Highcharts to 9.0.0 version. ([e23e896](https://github.com/highcharts/highcharts-angular/pull/267/commits/e23e896b8ff0ac49f8756b5e343ad4c39305c216)) 34 | 35 | ### Bug Fixes 36 | 37 | * fixed incorrect link ([c274d5e](https://github.com/highcharts/highcharts-angular/commit/c274d5edc5457f09f1e0631ea29c0f88a0145726)) 38 | 39 | ## [2.9.0](https://github.com/highcharts/highcharts-angular/compare/v2.8.1...v2.9.0) (2021-01-04) 40 | 41 | ### Features 42 | 43 | * Added common TS error example to the online examples, and the FAQ section. ([6c13fdd](https://github.com/highcharts/highcharts-angular/commit/6c13fdd21ac524140046f3a81fcedf24b2fae608)) 44 | * Added how to use proj4 to the online examples, and the FAQ section. ([7f02d4e](https://github.com/highcharts/highcharts-angular/commit/7f02d4e887cc8d36b6adbac5f5e9bef3d8991358)) 45 | * Added portals demo to the online examples, and the FAQ section. ([5e166bf](https://github.com/highcharts/highcharts-angular/commit/5e166bfba22ed9038b0bbd564ec7524025ae2cec)) 46 | * Updated Highcharts products names in the README file. ([4831134](https://github.com/highcharts/highcharts-angular/commit/4831134e2e0a7f1a6295e0cb891850f38703157d)) 47 | * Updated Angular to version 11. ([594c411](https://github.com/highcharts/highcharts-angular/pull/257/commits/594c4112eb30b093649fe8ee0a36abc0642c589b)) 48 | 49 | ## [2.8.2](https://github.com/highcharts/highcharts-angular/compare/v2.8.1...v2.8.2) (2020-11-02) 50 | 51 | ### Bug Fixes 52 | 53 | * Changed peer dependencies. ([07e6209](https://github.com/highcharts/highcharts-angular/pull/228/commits/07e6209e594e6026faae394a7b9b3edd5fdcc4b5)) 54 | 55 | ## [2.8.0](https://github.com/highcharts/highcharts-angular/compare/v2.4.0...v2.8.0) (2020-08-31) 56 | 57 | ### Features 58 | 59 | * Updated Angular to version 10. ([a28190c](https://github.com/highcharts/highcharts-angular/pull/219/commits/a28190cd6a14be4d74c57868eaaba49c137700c7)) 60 | * Added Tests for creating a simple component. ([d6107dd](https://github.com/highcharts/highcharts-angular/pull/219/commits/d6107dd4b75d87add8c7213356bf2f383bd79b85)) 61 | * Added a paragraph about SSR in the README. ([9269c55](https://github.com/highcharts/highcharts-angular/pull/219/commits/9269c55f993b234284a01e11eaa439c9cf206050)) 62 | 63 | 64 | ### Bug Fixes 65 | 66 | * Fixed lazy-loading demo. ([de88e2a](https://github.com/highcharts/highcharts-angular/pull/219/commits/de88e2a54b9060b87ee458048943b8dfb2db5956)) 67 | 68 | ## [2.7.0](https://github.com/highcharts/highcharts-angular/compare/v2.4.0...v2.7.0) (2020-07-24) 69 | 70 | ### Features 71 | 72 | * Add issue templates. Closes [#100](https://github.com/highcharts/highcharts-angular/issues/100). ([1fcbb42](https://github.com/highcharts/highcharts-angular/commit/1fcbb428772897df0fc978c1a40aa69a0687d704)) 73 | * Added online examples in the README. ([fe78157](https://github.com/highcharts/highcharts-angular/commit/fe7815770dc2eab7191e2d1cea589b93b17fd2e7)) 74 | * Disabled ivy in tsconfig ([0f97065](https://github.com/highcharts/highcharts-angular/commit/0f970651cb6e5f53737b13d950a5ffcc4600a353)) 75 | * Extracted charts to separate components for the demo project. ([e8d401b](https://github.com/highcharts/highcharts-angular/commit/e8d401b9b785116ac551a21373aa5fddd994fdcf)) 76 | * Updated Angular to version 9. ([5832ff1](https://github.com/highcharts/highcharts-angular/commit/5832ff1532f54f87a7fa2f81282de67583909d38)) 77 | * Updated Highcharts version. ([dd9740f](https://github.com/highcharts/highcharts-angular/commit/dd9740f4b5e8677f89765dfa0ff179aeb6e5adb4)) 78 | * Updated the README. ([f54ec96](https://github.com/highcharts/highcharts-angular/commit/f54ec960473aabf27936d3b282e16ba3e01aeec7)) 79 | * Updated styles of the demo project. ([d56354a](https://github.com/highcharts/highcharts-angular/commit/d56354ab9c9134364b95a245e7393a15123c42b2)) 80 | 81 | 82 | ### Bug Fixes 83 | 84 | * Disabled aot and related dependency. ([19ff85d](https://github.com/highcharts/highcharts-angular/commit/19ff85d54ff3016caea66c390445f0c10ade2cfe)) 85 | 86 | __ 87 | ## 2.5.0 - 2.6.0 (2020-07-23) 88 | 89 | Due to problems with publishing the package, redundant versions have been released. Please do not use these versions. 90 | 91 | __ 92 | 93 | ## [2.4.0](https://github.com/highcharts/highcharts-angular/compare/v2.1.3...v2.4.0) (2018-12-27) 94 | 95 | 96 | ### Features 97 | 98 | * Added chart instance as the component's output. Closes [#26](https://github.com/highcharts/highcharts-angular/issues/26). ([04c2bd8](https://github.com/highcharts/highcharts-angular/commit/04c2bd8)) 99 | * Added demo for FAQ's about Synchronized charts. Closes [#93](https://github.com/highcharts/highcharts-angular/issues/93). ([1362608](https://github.com/highcharts/highcharts-angular/commit/1362608)) 100 | * Added reference to [@highcharts](https://github.com/highcharts)/map-collection and updated documentation. Closes [#89](https://github.com/highcharts/highcharts-angular/issues/89), closes [#104](https://github.com/highcharts/highcharts-angular/issues/104). ([c5081f0](https://github.com/highcharts/highcharts-angular/commit/c5081f0)) 101 | * Added support for optional running Highcharts outside of Angular. Closes [#75](https://github.com/highcharts/highcharts-angular/issues/75). ([2ebcb07](https://github.com/highcharts/highcharts-angular/commit/2ebcb07)) 102 | * Added TS definitions from Highcharts into the wrapper for types reference. ([56d93fa](https://github.com/highcharts/highcharts-angular/commit/56d93fa)) 103 | * Closes [#84](https://github.com/highcharts/highcharts-angular/issues/84), added info about Highcharts instance being shared in an Angular app. ([7aa3b32](https://github.com/highcharts/highcharts-angular/commit/7aa3b32)) 104 | * Refreshed and updated demo with some CSS and TS definitions. ([acc13b2](https://github.com/highcharts/highcharts-angular/commit/acc13b2)) 105 | * Update tslint rules. See PR [#98](https://github.com/highcharts/highcharts-angular/issues/98). ([4dc85da](https://github.com/highcharts/highcharts-angular/commit/4dc85da)) 106 | * Updated demo to version 7 for Highcharts and Angular. ([85151bf](https://github.com/highcharts/highcharts-angular/commit/85151bf)) 107 | 108 | 109 | 110 | 111 | ## [2.3.1](https://github.com/highcharts/highcharts-angular/compare/v2.3.0...v2.3.1) (2018-10-05) 112 | 113 | 114 | 115 | ## [2.3.0](https://github.com/highcharts/highcharts-angular/compare/v2.2.0...v2.3.0) (2018-10-04) 116 | 117 | 118 | ### Features 119 | 120 | * Added chart instance as the component's output. Closes [#26](https://github.com/highcharts/highcharts-angular/issues/26). ([04c2bd8](https://github.com/highcharts/highcharts-angular/commit/04c2bd8)) 121 | 122 | 123 | 124 | 125 | ## [2.2.0](https://github.com/highcharts/highcharts-angular/compare/v2.1.3...v2.2.0) (2018-09-28) 126 | 127 | 128 | ### Features 129 | 130 | * Added support for optional running Highcharts outside of Angular. Closes [#75](https://github.com/highcharts/highcharts-angular/issues/75). ([2ebcb07](https://github.com/highcharts/highcharts-angular/commit/2ebcb07)) 131 | 132 | 133 | 134 | 135 | ## [2.1.3](https://github.com/highcharts/highcharts-angular/compare/v2.1.2...v2.1.3) (2018-08-27) 136 | 137 | 138 | 139 | 140 | ## [2.1.2](https://github.com/highcharts/highcharts-angular/compare/v2.1.1...v2.1.2) (2018-08-24) 141 | 142 | 143 | 144 | 145 | ## [2.1.1](https://github.com/highcharts/highcharts-angular/compare/v2.1.0...v2.1.1) (2018-08-24) 146 | 147 | 148 | 149 | 150 | ## [2.1.0](https://github.com/highcharts/highcharts-angular/compare/v2.0.3...v2.1.0) (2018-08-24) 151 | 152 | 153 | ### Features 154 | 155 | * Added CHANGELOG.md and updated related documentation. ([8452557](https://github.com/highcharts/highcharts-angular/commit/8452557)) 156 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Highcharts Angular 2 | 3 | Copyright (c) 2016-2017, Highsoft 4 | 5 | The software in Highcharts Angular repository is free and open source, 6 | but as Highcharts Angular relies on Highcharts.js, it requires a valid 7 | Highcharts license for commercial use. 8 | 9 | Permission is hereby granted, free of charge, to any person obtaining 10 | a copy of this software and associated documentation files (the 11 | "Software"), to deal in the Software without restriction, including 12 | without limitation the rights to use, copy, modify, merge, publish, 13 | distribute, sublicense, and/or sell copies of the Software, and to 14 | permit persons to whom the Software is furnished to do so, subject to 15 | the following conditions: 16 | 17 | The above copyright notice and this permission notice shall be 18 | included in all copies or substantial portions of the Software. 19 | 20 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 21 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 22 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 23 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 24 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 25 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 26 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Highcharts Angular 2 | Official minimal Highcharts integration for Angular 3 | 4 | ## Table of Contents 5 | 1. [Getting started](#getting-started) 6 | 1. [General prerequisites](#general-prerequisites) 7 | 2. [Installing](#installing) 8 | 3. [Hello world demo](#hello-world-demo) 9 | 4. [Angular Universal - SSR](#angular-universal--SSR) 10 | 5. [Angular Elements and useHTML](#angular-elements-and-usehtml) 11 | 2. [Options details](#options-details) 12 | 3. [Chart instance](#chart-instance) 13 | 4. [Highcharts instance details](#highcharts-instance-details) 14 | 1. [Core](#core) 15 | 2. [To load a module](#to-load-a-module) 16 | 3. [To load a plugin](#to-load-a-plugin) 17 | 4. [To load a map for Highcharts Maps](#to-load-a-map-for-Highcharts-Maps) 18 | 5. [To load a wrapper](#to-load-a-wrapper) 19 | 6. [To use setOptions](#to-use-setoptions) 20 | 5. [Demo app](#demo-app) 21 | 1. [Play with the app](#play-with-the-app) 22 | 2. [Files to play with](#files-to-play-with) 23 | 6. [Online examples](#online-examples) 24 | 7. [Changing the Component](#changing-the-component) 25 | 8. [Help and FAQ](#help-and-faq) 26 | 27 | 28 | 29 | ## Getting started 30 | 31 | ### General prerequisites 32 | 33 | Make sure you have **node**, **NPM** and **Angular** up to date. 34 | 35 | | Version | Node | Angular | Highcharts | 36 | |---------------|---------------|---------------|---------------| 37 | | 4.0.0 | >=16.14 | >=16.0.0 | >=11.0.0 | 38 | | 3.1.2 | >=14.13 | >=15.0.0 | >=10.3.3 | 39 | | 3.0.0 | >=14.13 | >=9.0.0 | >=8.0.0 | 40 | | <2.10.0 | >=6.10.2 | >=6.0.0 | >=6.0.0 | 41 | 42 | 43 | ### Installing 44 | 45 | Get package from NPM in your Angular app: 46 | 47 | ```cli 48 | npm install highcharts-angular --save 49 | ``` 50 | 51 | In your app.module.ts add the HighchartsChartModule: 52 | 53 | ```ts 54 | ... 55 | import { HighchartsChartModule } from 'highcharts-angular'; 56 | 57 | @NgModule({ 58 | imports: [ 59 | ... 60 | HighchartsChartModule 61 | ``` 62 | 63 | In a component that will be building your Highcharts charts you will need to [import Highcharts](https://www.highcharts.com/docs/getting-started/install-from-npm) first, so in system console, while in your Angular app: 64 | 65 | ```cli 66 | npm install highcharts --save 67 | ``` 68 | 69 | Next, in the app.component.ts, in top lines where other `import`s are add another one for Highcharts: 70 | 71 | ```ts 72 | import * as Highcharts from 'highcharts'; 73 | ``` 74 | 75 | In the same file (app.component.ts) add to the **template** Highcharts-angular component selector `highcharts-chart`: 76 | 77 | ```html 78 | 91 | ``` 92 | 93 | Right side names, in double quotes, are just names of variables you are going to set next, so you could name them whatever you like. Style at the bottom of the selector is optional, but browsers do not know how to display ``, so you should set some styles. 94 | 95 | In the same file (app.component.ts) all variables should be set in `export class AppComponent {` like: 96 | 97 | ```ts 98 | export class AppComponent { 99 | Highcharts: typeof Highcharts = Highcharts; // required 100 | chartConstructor: string = 'chart'; // optional string, defaults to 'chart' 101 | chartOptions: Highcharts.Options = { ... }; // required 102 | chartCallback: Highcharts.ChartCallbackFunction = function (chart) { ... } // optional function, defaults to null 103 | updateFlag: boolean = false; // optional boolean 104 | oneToOneFlag: boolean = true; // optional boolean, defaults to false 105 | runOutsideAngular: boolean = false; // optional boolean, defaults to false 106 | ... 107 | ``` 108 | 109 | Used options are explained [below](#options-details). 110 | 111 | 112 | ### Hello world demo 113 | 114 | To create a simple demo start with [installing](#installing). 115 | 116 | Next for `app.component.ts`'s HTML template use: 117 | 118 | ```html 119 | 125 | ``` 126 | 127 | and export variables: 128 | 129 | ```ts 130 | export class AppComponent { 131 | Highcharts: typeof Highcharts = Highcharts; 132 | chartOptions: Highcharts.Options = { 133 | series: [{ 134 | data: [1, 2, 3], 135 | type: 'line' 136 | }] 137 | }; 138 | ... 139 | ``` 140 | 141 | Build and run your Angular app to see a basic line chart. 142 | 143 | ### Angular Universal - SSR 144 | 145 | The code running in the server-side rendering runs twice. The first run is done in an environment that lacks window (server-side) and causes Highcharts to be loaded, but not initialized. 146 | Because Highcharts is strictly bound with the browser events we need to prevent it from running on the server-side. 147 | To achieve that you can check if `typeof Highcharts` is equal to object (this condition won't be `true` on the server-side), and then use it under the `*ngIf` directive. 148 | ```TypeScript 149 | export class AppComponent { 150 | isHighcharts = typeof Highcharts === 'object'; 151 | Highcharts: typeof Highcharts = Highcharts; 152 | chartOptions: Highcharts.Options = {...}; 153 | } 154 | ``` 155 | 156 | ```HTML 157 | 162 | ``` 163 | 164 | ### Angular Elements and useHTML 165 | 166 | First, install angular elements: 167 | 168 | ```cli 169 | npm install @angular/elements --save 170 | ``` 171 | 172 | Include in main.ts file your element tag inside allowedTags and [element properties](https://angular.io/guide/elements#mapping) inside allowedAttributes: 173 | 174 | ```ts 175 | if (Highcharts && Highcharts.AST) { 176 | Highcharts.AST.allowedTags.push('translation-element'); 177 | Highcharts.AST.allowedAttributes.push('translation-key'); 178 | } 179 | ``` 180 | 181 | Define your element in the constructor of the component that will use it: 182 | 183 | ```ts 184 | private defineTranslationElement() { 185 | if (isNil(customElements.get('translation-element'))) { 186 | const translationElement = createCustomElement(TranslationComponent, { 187 | injector: this.injector, 188 | }); 189 | customElements.define('translation-element', translationElement); 190 | } 191 | } 192 | ``` 193 | 194 | Then, create the element, set properties and use it in the chart: 195 | 196 | ```ts 197 | const translationEl: NgElement & WithProperties = 198 | document.createElement(translationElementTag); 199 | 200 | translationEl.setAttribute( 201 | 'translation-key', 202 | 'shared.title' 203 | ); 204 | 205 | const chartOptions: Highcharts.Options = { 206 | title: { 207 | text: translationEl.outerHTML, 208 | useHTML: true, 209 | }, 210 | xAxis: [ 211 | ... 212 | ``` 213 | 214 | For a more detailed view take a look at the [Online Examples - Angular Elements and useHTML](#online-examples) 215 | 216 | ## Options details 217 | 218 | | Parameter | Type | Required | Defaults | Description | 219 | | --------- | :----: | :--------: | :--------: | ----------- | 220 | | `[Highcharts]` | Object | yes | `-` | This is a Highcharts instance with **required core** and optional **modules**, **plugin**, **maps**, **wrappers**, and set global options using **[`setOptions`](https://www.highcharts.com/docs/getting-started/how-to-set-options#2)**. More detail for the option in [the next documentation section](#highcharts-instance-details). | 221 | | `[constructorType]` | String | no | `'chart'` | String for [constructor method](https://www.highcharts.com/docs/getting-started/your-first-chart). Official constructors:
- `'chart'` for Highcharts charts
- `'stockChart'` for Highcharts Stock
- `'mapChart'` for Highcharts Maps
- `'ganttChart'` for Highcharts Gantt

Keep in mind that `'stockChart'`, `'mapChart'`, `'ganttChart'` require loading the appropriate package or module. | 222 | | `[options]` | Object | yes | `-` | Possible chart options could be found in [Highcharts API reference](http://api.highcharts.com/highcharts).The minimal working object that could be set for basic testing is `{ series:[{ data:[1, 2] }] }`. | 223 | | `[(update)]` | Boolean | no | `-` | A boolean to trigger an update on a chart as Angular is not detecting nested changes in an object passed to a component. Set corresponding variable (`updateFlag` in the example) to `true` and after update on a chart is done it will be changed asynchronously to `false` by Highcharts-angular component.| 224 | | `[oneToOne]` | Boolean | no | `false` | 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 either added or removed to match the new updated options. For example, if the chart has **two** series and we call the `chart.update` (and this is called on each chart's data change or if `updateFlag` is set to true) with a configuration containing **three** series, **one** will be added. If we call the `chart.update` with **one** series, **one** will be removed. Setting an empty series array will remove all series, but leaving out the series property will leave all series untouched. If the series have id's, the new series options will be matched by id, and the remaining ones removed.

The option presented in [the demo](#demo-app) in the first chart - try setting new chart options with different amounts of series in [the textarea input](https://github.com/highcharts/highcharts-angular/blob/36e158e684b5823e1b1bd1cedf75548022eba1a9/src/app/app.component.html#L7) to see this option in action.| 225 | | `[callbackFunction]` | Function | no | `-` | A callback function for the created chart. The first argument for the function will hold the created **chart**. Default `this` in the function points to the **chart**. | 226 | | `[runOutsideAngular]` | Boolean | no | `false` | When this option is set to `true` chart is created and updated outside of Angular's zone and Highcharts events do not trigger Angular change-detection. Details about `runOutsideAngular` are available in [Angular documentation](https://angular.io/api/core/NgZone#runoutsideangular). This option is more useful for bigger, more complex application (see [discussion](https://github.com/highcharts/highcharts-angular/pull/73)).

The option is presented in [this demo](https://stackblitz.com/edit/highcharts-angular-runoutsideangular).| 227 | 228 | ## Chart instance 229 | 230 | A chart instance could be obtained using: 231 | 232 | * **chart's callback function** - `chart` is provided as first argument (see [demo app](#demo-app) and first `hcCallback` function) 233 | * **chart's events** - context of all [chart's events](https://api.highcharts.com/highcharts/chart.events) functions is the chart instance 234 | * **component output `chartInstance`** - emitted after chart is created (see [demo app](#demo-app) and `logChartInstance` function) 235 | 236 | **Notice:** If you are getting chart instance from **[chart's load event](https://api.highcharts.com/highcharts/chart.events.load)** or **chart's callback funciton** and will be supporting exporting, then this function runs again when the chart is exported, because a chart for export is being created. To distinguish when the function is called for the chart and when it's called for the for-export chart you could check `chart.renderer.forExport`. If will be set to `true` for the for-export chart and `undefined` for the main chart. 237 | 238 | 239 | 240 | ## Highcharts instance details 241 | 242 | This is a Highcharts instance optionally with initialized **[modules](#to-load-a-module)**, **[plugins](#to-load-a-plugin)**, **[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.** 243 | 244 | _Notice:_ The Highcharts instance is shared through components in an Angular app, so loaded modules will affect all charts. 245 | 246 | ### Core 247 | 248 | As core you could load **Highcharts**, **Highcharts Stock**, **Highcharts Maps** or **Highcharts Gantt** (v. 6.2.0+). 249 | 250 | * For **Highcharts**: 251 | 252 | ```ts 253 | import * as Highcharts from 'highcharts'; 254 | ``` 255 | 256 | * For **Highcharts Stock**: 257 | 258 | ```ts 259 | import * as Highcharts from 'highcharts/highstock'; 260 | ``` 261 | 262 | * For **Highcharts Maps**: 263 | 264 | ```ts 265 | import * as Highcharts from 'highcharts/highmaps'; 266 | ``` 267 | 268 | * For **Highcharts Gantt**: 269 | 270 | ```ts 271 | import * as Highcharts from 'highcharts/highcharts-gantt'; 272 | ``` 273 | 274 | ### To load a module 275 | 276 | A 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)). 277 | 278 | #### In version 7.x.x - 11.x.x 279 | 280 | After Highcharts is imported using Highcharts, Highcharts Stock or Highcharts Maps use `import` and initialize each module on the Highcharts variable. 281 | 282 | ```ts 283 | import * as Highcharts from 'highcharts'; 284 | import HC_exporting from 'highcharts/modules/exporting'; 285 | HC_exporting(Highcharts); 286 | ``` 287 | 288 | Alternatively, this could be done with `require`, but usually (depends on your app configuration) additional declaration `declare var require: any;` is needed at the top of the TypeScript file in which the modules are loaded. 289 | 290 | ```ts 291 | import * as Highcharts from 'highcharts'; 292 | require('highcharts/modules/exporting')(Highcharts); 293 | ``` 294 | 295 | #### In version 12.x.x + 296 | Since version 12, the module no longer returns a factory function. When importing Highcharts as a JavaScript module, additional modules no longer require initialization. 297 | Import it as follows: 298 | 299 | ```ts 300 | import * as Highcharts from 'highcharts'; 301 | import 'highcharts/modules/exporting'; 302 | ``` 303 | 304 | ### To load a plugin 305 | 306 | A plugin is a third party/community made Highcharts addon (plugins are listed in the [Highcharts plugin registry](https://www.highcharts.com/blog/add-ons/)). First, make sure that a plugin support loading over NPM and load the required files. In example [Custom-Events](https://www.npmjs.com/package/highcharts-custom-events) supports NPM loading, so after installing the package you could initialize it like: 307 | 308 | ```ts 309 | import * as Highcharts from 'highcharts'; 310 | import * as HC_customEvents from 'highcharts-custom-events'; 311 | HC_customEvents(Highcharts); 312 | ``` 313 | 314 | If a plugin doesn't support loading through NPM you could treat it as a wrapper - see instructions below. 315 | 316 | If a lack of TypeScirpt 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. 317 | 318 | ### To load a map for Highcharts Maps 319 | 320 | Official map collection is published and [here](https://www.npmjs.com/package/@highcharts/map-collection#install-from-npm) are basic instructions for loading a map. 321 | An example can also be found in the [demo app](#demo-app). 322 | 323 | ### To load a wrapper 324 | 325 | A wrapper is a [custom extension](https://www.highcharts.com/docs/extending-highcharts/extending-highcharts) for Highcharts. To load a wrapper the same way as a module you could save it as a Javascript file and edit it by adding below code to beginning and end of a file: 326 | 327 | ```js 328 | (function (factory) { 329 | if (typeof module === 'object' && module.exports) { 330 | module.exports = factory; 331 | } else { 332 | factory(Highcharts); 333 | } 334 | }(function (Highcharts) { 335 | 336 | ... 337 | /* wrapper code */ 338 | ... 339 | 340 | })); 341 | ``` 342 | 343 | Next, you will be loading a local .js file, so you should add in `tsconfig.json` in your app `allowJs: true`: 344 | 345 | ```js 346 | ... 347 | "compilerOptions": { 348 | "allowJs": true, 349 | ... 350 | ``` 351 | 352 | The wrapper is ready to be imported to your app. Use `require` instead of import to prevent TS5055 errors. 353 | 354 | ```ts 355 | import * as Highcharts from 'highcharts'; 356 | require('./relative-path-to-the-wrapper-file/wrapper-file-name')(Highcharts); 357 | ``` 358 | 359 | Where `relative-path-to-the-wrapper-file` should be relative (for the module importing the wrapper) path to the wrapper file and `wrapper-file-name` should be the name of the wrapper file. 360 | 361 | If a lack of TypeScirpt 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. 362 | 363 | ### To use [`setOptions`](https://www.highcharts.com/docs/getting-started/how-to-set-options#2) 364 | 365 | The best place to use `setOptions` is after your Highcharts instance is ready and before Highcharts variable is set in the main component. Example: 366 | 367 | ```ts 368 | import * as Highcharts from 'highcharts/highstock'; 369 | 370 | ... 371 | 372 | Highcharts.setOptions({ 373 | title: { 374 | style: { 375 | color: 'orange' 376 | } 377 | } 378 | }); 379 | 380 | ... 381 | 382 | export class AppComponent { 383 | Highcharts: typeof Highcharts = Highcharts; 384 | ``` 385 | 386 | 387 | 388 | ## Demo app 389 | 390 | Download (or clone) the contents of the **[highcharts-angular](https://github.com/highcharts/highcharts-angular)** GitHub repository. 391 | The demo app is not using external dependencies but the build of the `highcharts-angular` package thus here it is required to run `npm start` to generate this package. 392 | 393 | In system console, in main repo folder run: 394 | 395 | ```cli 396 | npm install 397 | npm start 398 | ``` 399 | 400 | This opens [http://localhost:4200/](http://localhost:4200/) in your default browser with the app. 401 | 402 | To open on a different port, for example `12345`, use: 403 | 404 | ```cli 405 | npm start -- --port 12345 406 | ``` 407 | 408 | ### Play with the app 409 | 410 | Keep the console running and change some files - after a save the app will rebuild and refresh the localhost preview. 411 | 412 | ### Files to play with 413 | 414 | * **app.component.ts** (in `src\app`) 415 | 416 | Contains Angular main component that uses the *chart* component. 417 | 418 | * **chart.component.ts** (in `src\app\chart`) 419 | 420 | Contains the chart component that creates Highcharts chart. 421 | 422 | 423 | ## Online examples 424 | 425 | * [Basic line](https://stackblitz.com/edit/highcharts-angular-line) 426 | * [Stock](https://stackblitz.com/edit/highcharts-angular-stock-chart) 427 | * [Stock + indicators](https://stackblitz.com/edit/highcharts-angular-stock-with-indicators) 428 | * [Stock + GUI](https://stackblitz.com/edit/highcharts-angular-stock-tools-gui) 429 | * [Map](https://stackblitz.com/edit/highcharts-angular-world-map) 430 | * [Gantt](https://stackblitz.com/edit/highcharts-angular-gantt-chart) 431 | * [Map + mapppoints with lat/lon](https://stackblitz.com/edit/highcharts-angular-mappoint-lat-lon) 432 | * [Map + mapppoints with proj4](https://stackblitz.com/edit/highcharts-angular-map-with-proj4) 433 | * [Optimal way to update](https://stackblitz.com/edit/highcharts-angular-update-optimal-way) 434 | * [Data from the service](https://stackblitz.com/edit/highcharts-angular-data-from-a-service) 435 | * [Applying a custom plugin/wrap](https://stackblitz.com/edit/highcharts-angular-a-custom-plugin) 436 | * [Property `XXX` does not exist on type `YYY`](https://stackblitz.com/edit/highcharts-angular-property-xxx-doesnt-exist) 437 | * [Using portals to render an angular component within a chart](https://stackblitz.com/edit/highcharts-angular-portals) 438 | * [Angular Elements and useHTML](https://stackblitz.com/~/github.com/karolkolodziej/highcharts-angular-elements) 439 | 440 | ## Changing the Component 441 | 442 | Using Angular CLI v6, the library must be manually rebuilt on each change 443 | in order to reflect in the demo app. 444 | 445 | Run the following command on each change to the `highcharts-chart.component.ts` file: 446 | 447 | ```cli 448 | npm run build 449 | ``` 450 | 451 | If you are running the demo app in another terminal window when you rebuild the 452 | library, the changes should be reflected in your browser (note: you may need to 453 | refresh the browser a second time after the live reload in order to see the change). 454 | 455 | See [https://github.com/angular/angular-cli/wiki/stories-create-library](https://github.com/angular/angular-cli/wiki/stories-create-library) 456 | for details on library builds. 457 | 458 | For CHANGELOG.md update use `npm run release`. 459 | 460 | 461 | 462 | ## Help and FAQ 463 | 464 | For technical support please contact [Highcharts technical support](https://www.highcharts.com/support). 465 | 466 | For TypeScript problems with Highcharts first see [Highcharts documentation for TypeScript usage](https://www.highcharts.com/docs/advanced-chart-features/highcharts-typescript-declarations). 467 | 468 | ### FAQ: 469 | 470 | #### How to add and use indicators? 471 | 472 | Add [indicators](https://www.highcharts.com/docs/chart-and-series-types/technical-indicator-series) as any other module. 473 | [Live demo](https://stackblitz.com/edit/highcharts-angular-stock-with-indicators) 474 | 475 | #### How to add and use themes? 476 | 477 | Add [themes](https://www.highcharts.com/docs/chart-design-and-style/themes) as any other module. 478 | See the [demo app](#demo-app) in this repository for an example. 479 | 480 | More info about custom themes in [Highcharts general documentation](https://www.highcharts.com/docs/chart-design-and-style/custom-themes-in-styled-mode). 481 | 482 | #### I have a general issue with Highcharts and TypeScript 483 | 484 | The correct repository to report such issues is [main Highcharts repository](https://github.com/highcharts/highcharts/issues). 485 | 486 | #### Synchronized Charts Angular demo 487 | 488 | Based on original Highcharts demo for [Synchronized charts](https://www.highcharts.com/demo/synchronized-charts). 489 | 490 | Additionally added class based sync between charts - [demo](https://stackblitz.com/edit/highcharts-angular-synced-charts). 491 | 492 | #### Property `XXX` does not exist on type `YYY` 493 | 494 | It 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 - [demo](https://stackblitz.com/edit/highcharts-angular-property-xxx-doesnt-exist). 495 | 496 | #### How to use Highcharts Maps with the proj4? 497 | 498 | Install 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 or [live demo](https://stackblitz.com/edit/highcharts-angular-map-with-proj4) example. 499 | 500 | #### I want to render angular component in the tooltip/axis formatter 501 | 502 | To render angular component within the chart you can use the angular [portals](https://material.angular.io/cdk/portal/overview) - [demo](https://stackblitz.com/edit/highcharts-angular-portals) 503 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "projects": { 5 | "my-app": { 6 | "root": "", 7 | "sourceRoot": "src", 8 | "projectType": "application", 9 | "architect": { 10 | "build": { 11 | "builder": "@angular-devkit/build-angular:browser", 12 | "options": { 13 | "aot": false, 14 | "allowedCommonJsDependencies": [ 15 | "highcharts", 16 | "highcharts-custom-events" 17 | ], 18 | "outputPath": "dist", 19 | "index": "src/index.html", 20 | "main": "src/main.ts", 21 | "tsConfig": "./tsconfig.app.json", 22 | "polyfills": "src/polyfills.ts", 23 | "assets": [ 24 | "src/assets", 25 | "src/favicon.ico" 26 | ], 27 | "styles": [], 28 | "scripts": [], 29 | "vendorChunk": true, 30 | "extractLicenses": false, 31 | "buildOptimizer": false, 32 | "sourceMap": true, 33 | "optimization": false, 34 | "namedChunks": true 35 | }, 36 | "configurations": { 37 | "production": { 38 | "budgets": [ 39 | { 40 | "type": "anyComponentStyle", 41 | "maximumWarning": "6kb" 42 | } 43 | ], 44 | "optimization": true, 45 | "outputHashing": "all", 46 | "sourceMap": false, 47 | "namedChunks": false, 48 | "aot": true, 49 | "extractLicenses": true, 50 | "vendorChunk": false, 51 | "buildOptimizer": true, 52 | "fileReplacements": [ 53 | { 54 | "replace": "src/environments/environment.ts", 55 | "with": "src/environments/environment.prod.ts" 56 | } 57 | ] 58 | } 59 | }, 60 | "defaultConfiguration": "" 61 | }, 62 | "serve": { 63 | "builder": "@angular-devkit/build-angular:dev-server", 64 | "options": { 65 | "browserTarget": "my-app:build" 66 | }, 67 | "configurations": { 68 | "production": { 69 | "browserTarget": "my-app:build:production" 70 | } 71 | } 72 | }, 73 | "extract-i18n": { 74 | "builder": "@angular-devkit/build-angular:extract-i18n", 75 | "options": { 76 | "browserTarget": "my-app:build" 77 | } 78 | }, 79 | "test": { 80 | "builder": "@angular-devkit/build-angular:karma", 81 | "options": { 82 | "main": "src/test.ts", 83 | "karmaConfig": "./karma.conf.js", 84 | "polyfills": "src/polyfills.ts", 85 | "tsConfig": "./tsconfig.spec.json", 86 | "scripts": [], 87 | "styles": [], 88 | "assets": [ 89 | "src/assets", 90 | "src/favicon.ico" 91 | ] 92 | } 93 | } 94 | } 95 | }, 96 | "my-app-e2e": { 97 | "root": "", 98 | "sourceRoot": "e2e", 99 | "projectType": "application", 100 | "architect": { 101 | "e2e": { 102 | "builder": "@angular-devkit/build-angular:protractor", 103 | "options": { 104 | "protractorConfig": "./protractor.conf.js", 105 | "devServerTarget": "my-app:serve" 106 | } 107 | } 108 | } 109 | }, 110 | "highcharts-angular": { 111 | "root": "highcharts-angular", 112 | "sourceRoot": "highcharts-angular/src", 113 | "projectType": "library", 114 | "prefix": "highcharts", 115 | "architect": { 116 | "build": { 117 | "builder": "@angular-devkit/build-angular:ng-packagr", 118 | "options": { 119 | "tsConfig": "highcharts-angular/tsconfig.lib.json", 120 | "project": "highcharts-angular/ng-package.json" 121 | }, 122 | "configurations": { 123 | "production": { 124 | "project": "highcharts-angular/ng-package.prod.json", 125 | "tsConfig": "highcharts-angular/tsconfig.lib.prod.json" 126 | } 127 | } 128 | }, 129 | "test": { 130 | "builder": "@angular-devkit/build-angular:karma", 131 | "options": { 132 | "main": "src/test.ts", 133 | "karmaConfig": "./karma.conf.js", 134 | "polyfills": "src/polyfills.ts", 135 | "tsConfig": "./tsconfig.spec.json", 136 | "scripts": [], 137 | "styles": [], 138 | } 139 | } 140 | } 141 | } 142 | }, 143 | "schematics": { 144 | "@schematics/angular:component": { 145 | "prefix": "app", 146 | "style": "css" 147 | }, 148 | "@schematics/angular:directive": { 149 | "prefix": "app" 150 | } 151 | }, 152 | "cli": { 153 | "analytics": "011d05a7-bf25-4e7e-8ea0-78f753015c1d" 154 | } 155 | } 156 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { MyAppPage } from './app.po'; 2 | 3 | describe('my-app App', () => { 4 | let page: MyAppPage; 5 | 6 | beforeEach(() => { 7 | page = new MyAppPage(); 8 | }); 9 | 10 | it('should display message saying app works', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('app works!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, element, by } from 'protractor'; 2 | 3 | export class MyAppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types":[ 8 | "jasmine", 9 | "node" 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /highcharts-angular/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### [4.0.1](https://github.com/highcharts/highcharts-angular/compare/v3.0.0...v4.0.1) (2024-07-23) 6 | 7 | ### Bug Fixes 8 | 9 | * Fixed #380, improved typing of the chartInstance emitter. ([b4751e5](https://github.com/highcharts/highcharts-angular/commit/b4751e5f915692f13a61f8b0fa8c4b428cdc9f30)) 10 | * Fixed #385, error when importing ESM module. ([832ca80](https://github.com/highcharts/highcharts-angular/commit/832ca80cf20ed5f9c18a992b2ac8e12040fbd708)) 11 | 12 | 13 | ## [4.0.0](https://github.com/highcharts/highcharts-angular/compare/v3.0.0...v4.0.0) (2023-11-07) 14 | 15 | ### Bug Fixes 16 | 17 | * Fix #365, the chat instance was not emitted on the `ngOnDestroy`.([344deb7](https://github.com/highcharts/highcharts-angular/pull/366/commits/344deb72b9dfbaefa6e14129bf5600920b582b3f)) 18 | 19 | ## [3.1.2](https://github.com/highcharts/highcharts-angular/compare/v3.0.0...v3.1.2) (2023-02-02) 20 | 21 | ## [3.1.0](https://github.com/highcharts/highcharts-angular/compare/v3.0.0...v3.1.0) (2023-02-02) 22 | 23 | ## [3.0.0](https://github.com/highcharts/highcharts-angular/compare/v2.10.0...v3.0.0) (2021-12-01) 24 | 25 | 26 | ### Features 27 | 28 | * Updated to Angular 13 ([aa202ec](https://github.com/highcharts/highcharts-angular/pull/305/commits/aa202ec98bb41bc85eb74229059adcc6398e3cc6) 29 | 30 | ## [2.10.0](https://github.com/highcharts/highcharts-angular/compare/v2.8.1...v2.10.0) (2021-02-09) 31 | 32 | ### Features 33 | 34 | * Updated Highcharts to 9.0.0 version. ([e23e896](https://github.com/highcharts/highcharts-angular/pull/267/commits/e23e896b8ff0ac49f8756b5e343ad4c39305c216)) 35 | 36 | ### Bug Fixes 37 | 38 | * fixed incorrect link ([c274d5e](https://github.com/highcharts/highcharts-angular/commit/c274d5edc5457f09f1e0631ea29c0f88a0145726)) 39 | 40 | ## [2.9.0](https://github.com/highcharts/highcharts-angular/compare/v2.8.1...v2.9.0) (2021-01-04) 41 | 42 | ### Features 43 | 44 | * Added common TS error example to the online examples, and the FAQ section. ([6c13fdd](https://github.com/highcharts/highcharts-angular/commit/6c13fdd21ac524140046f3a81fcedf24b2fae608)) 45 | * Added how to use proj4 to the online examples, and the FAQ section. ([7f02d4e](https://github.com/highcharts/highcharts-angular/commit/7f02d4e887cc8d36b6adbac5f5e9bef3d8991358)) 46 | * Added portals demo to the online examples, and the FAQ section. ([5e166bf](https://github.com/highcharts/highcharts-angular/commit/5e166bfba22ed9038b0bbd564ec7524025ae2cec)) 47 | * Updated Highcharts products names in the README file. ([4831134](https://github.com/highcharts/highcharts-angular/commit/4831134e2e0a7f1a6295e0cb891850f38703157d)) 48 | * Updated Angular to version 11. ([594c411](https://github.com/highcharts/highcharts-angular/pull/257/commits/594c4112eb30b093649fe8ee0a36abc0642c589b)) 49 | 50 | ## [2.8.2](https://github.com/highcharts/highcharts-angular/compare/v2.8.1...v2.8.2) (2020-11-02) 51 | 52 | ### Bug Fixes 53 | 54 | * Changed peer dependencies. ([07e6209](https://github.com/highcharts/highcharts-angular/pull/228/commits/07e6209e594e6026faae394a7b9b3edd5fdcc4b5)) 55 | 56 | ## [2.8.0](https://github.com/highcharts/highcharts-angular/compare/v2.4.0...v2.8.0) (2020-08-31) 57 | 58 | ### Features 59 | 60 | * Updated Angular to version 10. ([a28190c](https://github.com/highcharts/highcharts-angular/pull/219/commits/a28190cd6a14be4d74c57868eaaba49c137700c7)) 61 | * Added Tests for creating a simple component. ([d6107dd](https://github.com/highcharts/highcharts-angular/pull/219/commits/d6107dd4b75d87add8c7213356bf2f383bd79b85)) 62 | * Added a paragraph about SSR in the README. ([9269c55](https://github.com/highcharts/highcharts-angular/pull/219/commits/9269c55f993b234284a01e11eaa439c9cf206050)) 63 | 64 | 65 | ### Bug Fixes 66 | 67 | * Fixed lazy-loading demo. ([de88e2a](https://github.com/highcharts/highcharts-angular/pull/219/commits/de88e2a54b9060b87ee458048943b8dfb2db5956)) 68 | 69 | ## [2.7.0](https://github.com/highcharts/highcharts-angular/compare/v2.4.0...v2.7.0) (2020-07-24) 70 | 71 | ### Features 72 | 73 | * Add issue templates. Closes [#100](https://github.com/highcharts/highcharts-angular/issues/100). ([1fcbb42](https://github.com/highcharts/highcharts-angular/commit/1fcbb428772897df0fc978c1a40aa69a0687d704)) 74 | * Added online examples in the README. ([fe78157](https://github.com/highcharts/highcharts-angular/commit/fe7815770dc2eab7191e2d1cea589b93b17fd2e7)) 75 | * Disabled ivy in tsconfig ([0f97065](https://github.com/highcharts/highcharts-angular/commit/0f970651cb6e5f53737b13d950a5ffcc4600a353)) 76 | * Extracted charts to separate components for the demo project. ([e8d401b](https://github.com/highcharts/highcharts-angular/commit/e8d401b9b785116ac551a21373aa5fddd994fdcf)) 77 | * Updated Angular to version 9. ([5832ff1](https://github.com/highcharts/highcharts-angular/commit/5832ff1532f54f87a7fa2f81282de67583909d38)) 78 | * Updated Highcharts version. ([dd9740f](https://github.com/highcharts/highcharts-angular/commit/dd9740f4b5e8677f89765dfa0ff179aeb6e5adb4)) 79 | * Updated the README. ([f54ec96](https://github.com/highcharts/highcharts-angular/commit/f54ec960473aabf27936d3b282e16ba3e01aeec7)) 80 | * Updated styles of the demo project. ([d56354a](https://github.com/highcharts/highcharts-angular/commit/d56354ab9c9134364b95a245e7393a15123c42b2)) 81 | 82 | 83 | ### Bug Fixes 84 | 85 | * Disabled aot and related dependency. ([19ff85d](https://github.com/highcharts/highcharts-angular/commit/19ff85d54ff3016caea66c390445f0c10ade2cfe)) 86 | 87 | __ 88 | ## 2.5.0 - 2.6.0 (2020-07-23) 89 | 90 | Due to problems with publishing the package, redundant versions have been released. Please do not use these versions. 91 | 92 | __ 93 | 94 | ## [2.4.0](https://github.com/highcharts/highcharts-angular/compare/v2.1.3...v2.4.0) (2018-12-27) 95 | 96 | 97 | ### Features 98 | 99 | * Added chart instance as the component's output. Closes [#26](https://github.com/highcharts/highcharts-angular/issues/26). ([04c2bd8](https://github.com/highcharts/highcharts-angular/commit/04c2bd8)) 100 | * Added demo for FAQ's about Synchronized charts. Closes [#93](https://github.com/highcharts/highcharts-angular/issues/93). ([1362608](https://github.com/highcharts/highcharts-angular/commit/1362608)) 101 | * Added reference to [@highcharts](https://github.com/highcharts)/map-collection and updated documentation. Closes [#89](https://github.com/highcharts/highcharts-angular/issues/89), closes [#104](https://github.com/highcharts/highcharts-angular/issues/104). ([c5081f0](https://github.com/highcharts/highcharts-angular/commit/c5081f0)) 102 | * Added support for optional running Highcharts outside of Angular. Closes [#75](https://github.com/highcharts/highcharts-angular/issues/75). ([2ebcb07](https://github.com/highcharts/highcharts-angular/commit/2ebcb07)) 103 | * Added TS definitions from Highcharts into the wrapper for types reference. ([56d93fa](https://github.com/highcharts/highcharts-angular/commit/56d93fa)) 104 | * Closes [#84](https://github.com/highcharts/highcharts-angular/issues/84), added info about Highcharts instance being shared in an Angular app. ([7aa3b32](https://github.com/highcharts/highcharts-angular/commit/7aa3b32)) 105 | * Refreshed and updated demo with some CSS and TS definitions. ([acc13b2](https://github.com/highcharts/highcharts-angular/commit/acc13b2)) 106 | * Update tslint rules. See PR [#98](https://github.com/highcharts/highcharts-angular/issues/98). ([4dc85da](https://github.com/highcharts/highcharts-angular/commit/4dc85da)) 107 | * Updated demo to version 7 for Highcharts and Angular. ([85151bf](https://github.com/highcharts/highcharts-angular/commit/85151bf)) 108 | 109 | 110 | 111 | 112 | ## [2.3.1](https://github.com/highcharts/highcharts-angular/compare/v2.3.0...v2.3.1) (2018-10-05) 113 | 114 | 115 | 116 | ## [2.3.0](https://github.com/highcharts/highcharts-angular/compare/v2.2.0...v2.3.0) (2018-10-04) 117 | 118 | 119 | ### Features 120 | 121 | * Added chart instance as the component's output. Closes [#26](https://github.com/highcharts/highcharts-angular/issues/26). ([04c2bd8](https://github.com/highcharts/highcharts-angular/commit/04c2bd8)) 122 | 123 | 124 | 125 | 126 | ## [2.2.0](https://github.com/highcharts/highcharts-angular/compare/v2.1.3...v2.2.0) (2018-09-28) 127 | 128 | 129 | ### Features 130 | 131 | * Added support for optional running Highcharts outside of Angular. Closes [#75](https://github.com/highcharts/highcharts-angular/issues/75). ([2ebcb07](https://github.com/highcharts/highcharts-angular/commit/2ebcb07)) 132 | 133 | 134 | 135 | 136 | ## [2.1.3](https://github.com/highcharts/highcharts-angular/compare/v2.1.2...v2.1.3) (2018-08-27) 137 | 138 | 139 | 140 | 141 | ## [2.1.2](https://github.com/highcharts/highcharts-angular/compare/v2.1.1...v2.1.2) (2018-08-24) 142 | 143 | 144 | 145 | 146 | ## [2.1.1](https://github.com/highcharts/highcharts-angular/compare/v2.1.0...v2.1.1) (2018-08-24) 147 | 148 | 149 | 150 | 151 | ## [2.1.0](https://github.com/highcharts/highcharts-angular/compare/v2.0.3...v2.1.0) (2018-08-24) 152 | 153 | 154 | ### Features 155 | 156 | * Added CHANGELOG.md and updated related documentation. ([8452557](https://github.com/highcharts/highcharts-angular/commit/8452557)) 157 | -------------------------------------------------------------------------------- /highcharts-angular/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /highcharts-angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../dist/highcharts-angular", 4 | "deleteDestPath": false, 5 | "lib": { 6 | "entryFile": "src/public_api.ts" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /highcharts-angular/ng-package.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../dist/highcharts-angular", 4 | "lib": { 5 | "entryFile": "src/public_api.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /highcharts-angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "highcharts-angular", 3 | "description": "Highcharts component for Angular.", 4 | "version": "4.0.1", 5 | "license": "MIT", 6 | "author": "Black Label (http://blacklabel.pl)", 7 | "bugs": { 8 | "url": "https://github.com/highcharts/highcharts-angular/issues" 9 | }, 10 | "homepage": "https://github.com/highcharts/highcharts-angular#readme", 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/highcharts/highcharts-angular" 14 | }, 15 | "keywords": [ 16 | "highcharts", 17 | "highstock", 18 | "highmaps", 19 | "angular" 20 | ], 21 | "peerDependencies": { 22 | "@angular/common": ">=16.0.0", 23 | "@angular/core": ">=16.0.0", 24 | "highcharts": ">=9.0.0" 25 | }, 26 | "dependencies": { 27 | "tslib": "^2.0.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /highcharts-angular/src/lib/highcharts-chart.component.ts: -------------------------------------------------------------------------------- 1 | import type { OnChanges, OnDestroy } from '@angular/core'; 2 | import { Component, ElementRef, EventEmitter, Input, Output, NgZone, SimpleChanges } from '@angular/core'; 3 | import type * as Highcharts from 'highcharts'; 4 | import type HighchartsESM from 'highcharts/es-modules/masters/highcharts.src'; 5 | 6 | @Component({ 7 | selector: 'highcharts-chart', 8 | template: '' 9 | }) 10 | export class HighchartsChartComponent implements OnDestroy, OnChanges { 11 | @Input() Highcharts: typeof Highcharts | typeof HighchartsESM; 12 | @Input() constructorType: string; 13 | @Input() callbackFunction: Highcharts.ChartCallbackFunction; 14 | @Input() oneToOne: boolean; // #20 15 | @Input() runOutsideAngular: boolean; // #75 16 | @Input() options: Highcharts.Options | HighchartsESM.Options; 17 | @Input() update: boolean; 18 | 19 | @Output() updateChange = new EventEmitter(true); 20 | @Output() chartInstance = new EventEmitter(); // #26 21 | 22 | private chart: Highcharts.Chart | null; 23 | 24 | constructor( 25 | private el: ElementRef, 26 | private _zone: NgZone // #75 27 | ) {} 28 | 29 | ngOnChanges(changes: SimpleChanges): void { 30 | const update = changes.update?.currentValue; 31 | if (changes.options || update) { 32 | this.wrappedUpdateOrCreateChart(); 33 | if (update) { 34 | this.updateChange.emit(false); // clear the flag after update 35 | } 36 | } 37 | } 38 | 39 | wrappedUpdateOrCreateChart() { // #75 40 | if (this.runOutsideAngular) { 41 | this._zone.runOutsideAngular(() => { 42 | this.updateOrCreateChart() 43 | }); 44 | } else { 45 | this.updateOrCreateChart(); 46 | } 47 | } 48 | 49 | updateOrCreateChart() { 50 | if (this.chart?.update) { 51 | this.chart.update(this.options, true, this.oneToOne || false); 52 | } else { 53 | this.chart = this.Highcharts[this.constructorType || 'chart']( 54 | this.el.nativeElement, 55 | this.options, 56 | this.callbackFunction || null 57 | ); 58 | 59 | // emit chart instance on init 60 | this.chartInstance.emit(this.chart); 61 | } 62 | } 63 | 64 | ngOnDestroy() { // #44 65 | if (this.chart) { // #56 66 | this.chart.destroy(); 67 | this.chart = null; 68 | 69 | // emit chart instance on destroy 70 | this.chartInstance.emit(this.chart); 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /highcharts-angular/src/lib/highcharts-chart.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {HighchartsChartComponent} from './highcharts-chart.component'; 3 | 4 | @NgModule({ 5 | declarations: [ HighchartsChartComponent ], 6 | exports: [ HighchartsChartComponent ] 7 | }) 8 | export class HighchartsChartModule {} 9 | -------------------------------------------------------------------------------- /highcharts-angular/src/public_api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of highcharts-angular 3 | */ 4 | 5 | export * from './lib/highcharts-chart.module'; 6 | export * from './lib/highcharts-chart.component'; 7 | -------------------------------------------------------------------------------- /highcharts-angular/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import { getTestBed } from "@angular/core/testing"; 4 | import { 5 | BrowserDynamicTestingModule, 6 | platformBrowserDynamicTesting 7 | } from "@angular/platform-browser-dynamic/testing"; 8 | import "core-js/es/reflect"; 9 | import "zone.js"; 10 | import "zone.js/testing"; 11 | 12 | declare const require: any; 13 | 14 | // First, initialize the Angular testing environment. 15 | getTestBed().initTestEnvironment( 16 | BrowserDynamicTestingModule, 17 | platformBrowserDynamicTesting() 18 | ); 19 | // Then we find all the tests. 20 | const context = require.context("./", true, /\.spec\.ts$/); 21 | // And load the modules. 22 | context.keys().map(context); 23 | -------------------------------------------------------------------------------- /highcharts-angular/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "outDir": "../out-tsc/lib", 6 | "declarationMap": true, 7 | "module": "es2015", 8 | "moduleResolution": "node", 9 | "declaration": true, 10 | "sourceMap": true, 11 | "inlineSources": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "lib": [ 15 | "dom", 16 | "es2015" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "skipTemplateCodegen": true, 21 | "strictMetadataEmit": true, 22 | "fullTemplateTypeCheck": true, 23 | "strictInjectionParameters": true, 24 | "flatModuleId": "AUTOGENERATED", 25 | "flatModuleOutFile": "AUTOGENERATED" 26 | }, 27 | "exclude": [ 28 | "src/test.ts", 29 | "**/*.spec.ts" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /highcharts-angular/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "compilerOptions": { 4 | "declarationMap": false 5 | }, 6 | "angularCompilerOptions": { 7 | "compilationMode": "partial" 8 | } 9 | } -------------------------------------------------------------------------------- /highcharts-angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /highcharts-angular/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "highcharts", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "highcharts", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/app/highcharts-chart.component.ts') -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | files: [ 19 | 20 | ], 21 | preprocessors: { 22 | 23 | }, 24 | mime: { 25 | 'text/x-typescript': ['ts','tsx'] 26 | }, 27 | coverageIstanbulReporter: { 28 | dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ], 29 | fixWebpackSourcePaths: true 30 | }, 31 | 32 | reporters: config.angularCli && config.angularCli.codeCoverage 33 | ? ['progress', 'coverage-istanbul'] 34 | : ['progress', 'kjhtml'], 35 | port: 9876, 36 | colors: true, 37 | logLevel: config.LOG_INFO, 38 | autoWatch: true, 39 | browsers: ['Chrome'], 40 | singleRun: false 41 | }); 42 | }; 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "highcharts-angular-project", 3 | "private": true, 4 | "description": "Project to develop the Highcharts component for Angular. See the ./highcharts-angular folder for published project.", 5 | "version": "0.0.0", 6 | "license": "MIT", 7 | "author": "Black Label (http://blacklabel.pl)", 8 | "scripts": { 9 | "ng": "ng", 10 | "start": "node tasks/build.js && ng serve --open", 11 | "build": "node tasks/build.js", 12 | "test": "ng test", 13 | "lint": "ng lint highcharts-angular", 14 | "release": "cd ./highcharts-angular && standard-version && cd ../ && node tasks/build.js && node tasks/release.js", 15 | "release-minor": "cd ./highcharts-angular && standard-version --release-as minor && cd ../ && node tasks/build.js && node tasks/release.js", 16 | "release-major": "cd ./highcharts-angular && standard-version --release-as major && cd ../ && node tasks/build.js && node tasks/release.js", 17 | "e2e": "ng e2e" 18 | }, 19 | "dependencies": { 20 | "@angular/animations": "16.2.12", 21 | "@angular/common": "16.2.12", 22 | "@angular/compiler": "16.2.12", 23 | "@angular/core": "16.2.12", 24 | "@angular/forms": "16.2.12", 25 | "@angular/platform-browser": "16.2.12", 26 | "@angular/platform-browser-dynamic": "16.2.12", 27 | "@angular/router": "16.2.12", 28 | "@highcharts/map-collection": "^1.1.3", 29 | "core-js": "^3.19.2", 30 | "highcharts": "^11.2.0", 31 | "highcharts-custom-events": "^3.0.10", 32 | "jquery": "^3.6.0", 33 | "proj4": "^2.7.5", 34 | "rxjs": "^7.4.0", 35 | "tslib": "^2.3.1", 36 | "zone.js": "~0.13.3" 37 | }, 38 | "devDependencies": { 39 | "@angular-devkit/build-angular": "^16.2.9", 40 | "@angular-eslint/schematics": "^16.2.0", 41 | "@angular/cli": "16.2.9", 42 | "@angular/compiler-cli": "16.2.12", 43 | "@types/estree": "^1.0.0", 44 | "@types/jasmine": "3.10.2", 45 | "@types/jasminewd2": "2.0.10", 46 | "@types/node": "^16.11.11", 47 | "codelyzer": "^6.0.2", 48 | "jasmine-core": "~3.10.1", 49 | "jasmine-spec-reporter": "~7.0.0", 50 | "karma": "~6.3.9", 51 | "karma-chrome-launcher": "~3.1.0", 52 | "karma-coverage-istanbul-reporter": "~3.0.3", 53 | "karma-jasmine": "~4.0.1", 54 | "karma-jasmine-html-reporter": "^1.7.0", 55 | "ng-packagr": "^16.2.3", 56 | "node-sass": "7.0.1", 57 | "protractor": "~7.0.0", 58 | "standard-version": "^9.3.2", 59 | "ts-node": "^10.4.0", 60 | "tslint": "~6.1.0", 61 | "typescript": "5.1.6" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | beforeLaunch: function() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | }, 27 | onPrepare() { 28 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card { 2 | border: solid 1px #E1E1E1; 3 | border-radius: 0.5rem; 4 | display: flex; 5 | flex-direction: column; 6 | margin-top: 2rem; 7 | max-width: 1184px; 8 | padding: 2rem; 9 | width: 100%; 10 | background: white; 11 | } 12 | 13 | main { 14 | display:flex; 15 | flex-direction: column; 16 | align-items: center; 17 | width: 100%; 18 | } 19 | 20 | main:last-child { 21 | margin-bottom: 2rem; 22 | } -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 |
-------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | declare var require: any; 2 | 3 | import { Component } from '@angular/core'; 4 | import ExportingModule from 'highcharts/modules/exporting'; 5 | import SunsetTheme from 'highcharts/themes/sunset.js'; 6 | import * as Highcharts from "highcharts"; 7 | 8 | // The modules will work for all charts. 9 | ExportingModule(Highcharts); 10 | SunsetTheme(Highcharts); 11 | 12 | Highcharts.setOptions({ 13 | title: { 14 | style: { 15 | color: 'tomato' 16 | } 17 | }, 18 | legend: { 19 | enabled: false 20 | } 21 | }); 22 | 23 | @Component({ 24 | selector: 'app-root', 25 | templateUrl: 'app.component.html', 26 | styleUrls: ['./app.component.css'] 27 | }) 28 | 29 | export class AppComponent { 30 | 31 | } 32 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { HttpClientModule } from "@angular/common/http"; 2 | import { NgModule } from "@angular/core"; 3 | import { FormsModule } from "@angular/forms"; 4 | import { BrowserModule } from "@angular/platform-browser"; 5 | import { HighchartsChartModule } from "highcharts-angular"; 6 | import { AppComponent } from "./app.component"; 7 | import { LineChartComponent } from "./line-chart/line-chart.component"; 8 | import { StockChartComponent } from "./stock-chart/stock-chart.component"; 9 | import { MapChartComponent } from "./map-chart/map-chart.component"; 10 | import { GanttChartComponent } from "./gantt-chart/gantt-chart.component"; 11 | import { LazyLoadingChartComponent } from './lazy-loading-chart/lazy-loading-chart.component'; 12 | import { LineTestComponent } from './tests/line-test/line-test.component'; 13 | @NgModule({ 14 | declarations: [AppComponent, LineChartComponent, StockChartComponent, MapChartComponent, GanttChartComponent, LazyLoadingChartComponent, LineTestComponent], 15 | imports: [ 16 | BrowserModule, 17 | FormsModule, 18 | HighchartsChartModule, 19 | HttpClientModule, 20 | ], 21 | providers: [], 22 | bootstrap: [AppComponent] 23 | }) 24 | export class AppModule {} 25 | -------------------------------------------------------------------------------- /src/app/apple-data.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient, HttpErrorResponse } from '@angular/common/http' 3 | import { Observable, throwError } from 'rxjs'; 4 | import { catchError } from 'rxjs/operators'; 5 | 6 | @Injectable({ 7 | providedIn: 'root' 8 | }) 9 | export class AppleDataService { 10 | private dataUrl = 'https://demo-live-data.highcharts.com/aapl-historical.json'; 11 | 12 | constructor(private http: HttpClient) { } 13 | 14 | fetchData(): Observable { 15 | return this.http.get(this.dataUrl) 16 | .pipe(catchError(this.errorHandler)); 17 | } 18 | 19 | fetchSqlData(min: number, max: number): Observable { 20 | return this.http.get(`${this.dataUrl}?start=${Math.round(min)}&end=${Math.round(max)}`) 21 | .pipe(catchError(this.errorHandler)); 22 | } 23 | 24 | errorHandler(error: HttpErrorResponse) { 25 | return throwError(error.message || "server error."); 26 | } 27 | 28 | } -------------------------------------------------------------------------------- /src/app/gantt-chart/gantt-chart.component.css: -------------------------------------------------------------------------------- 1 | h2 { 2 | font-family: Arial, Helvetica, sans-serif; 3 | font-size: 1.25rem; 4 | margin: 0 0 1.5rem 0; 5 | } -------------------------------------------------------------------------------- /src/app/gantt-chart/gantt-chart.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Demo #4: Highcharts Gantt chart

3 | 9 |
-------------------------------------------------------------------------------- /src/app/gantt-chart/gantt-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import * as Highcharts from 'highcharts'; 3 | import HC_gantt from 'highcharts/modules/gantt'; 4 | 5 | HC_gantt(Highcharts); 6 | 7 | @Component({ 8 | selector: 'app-gantt-chart', 9 | templateUrl: './gantt-chart.component.html', 10 | styleUrls: ['./gantt-chart.component.css'] 11 | }) 12 | export class GanttChartComponent { 13 | Highcharts: typeof Highcharts = Highcharts; 14 | 15 | chartGantt: Highcharts.Options = { 16 | title: { 17 | text: 'Highcharts Gantt with Progress Indicators' 18 | }, 19 | xAxis: { 20 | min: Date.UTC(2014, 10, 17), 21 | max: Date.UTC(2014, 10, 30) 22 | }, 23 | 24 | series: [{ 25 | name: 'Project 1', 26 | type: 'gantt', 27 | data: [{ 28 | name: 'Start prototype', 29 | start: Date.UTC(2014, 10, 18), 30 | end: Date.UTC(2014, 10, 25), 31 | completed: 0.25 32 | }, { 33 | name: 'Test prototype', 34 | start: Date.UTC(2014, 10, 27), 35 | end: Date.UTC(2014, 10, 29) 36 | }, { 37 | name: 'Develop', 38 | start: Date.UTC(2014, 10, 20), 39 | end: Date.UTC(2014, 10, 25), 40 | completed: { 41 | amount: 0.12, 42 | fill: '#fa0' 43 | } 44 | }, { 45 | name: 'Run acceptance tests', 46 | start: Date.UTC(2014, 10, 23), 47 | end: Date.UTC(2014, 10, 26) 48 | }] 49 | }] 50 | }; 51 | 52 | } 53 | -------------------------------------------------------------------------------- /src/app/lazy-loading-chart/lazy-loading-chart.component.css: -------------------------------------------------------------------------------- 1 | h2 { 2 | font-family: Arial, Helvetica, sans-serif; 3 | font-size: 1.25rem; 4 | margin: 0 0 1.5rem 0; 5 | } -------------------------------------------------------------------------------- /src/app/lazy-loading-chart/lazy-loading-chart.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Demo #5: Lazy loading in Highcharts Stock

3 | 10 |
11 | -------------------------------------------------------------------------------- /src/app/lazy-loading-chart/lazy-loading-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import * as Highcharts from 'highcharts'; 3 | import HC_stock from 'highcharts/modules/stock'; 4 | import { AppleDataService } from '../apple-data.service' 5 | import $ from 'jquery'; 6 | import { Observable } from 'rxjs'; 7 | 8 | HC_stock(Highcharts); 9 | 10 | interface ExtendedPlotCandlestickDataGroupingOptions extends Highcharts.DataGroupingOptionsObject{ 11 | enabled: boolean 12 | } 13 | 14 | @Component({ 15 | selector: 'app-lazy-loading-chart', 16 | templateUrl: './lazy-loading-chart.component.html', 17 | styleUrls: ['./lazy-loading-chart.component.css'] 18 | }) 19 | export class LazyLoadingChartComponent { 20 | 21 | constructor(private appleDataService: AppleDataService) { } 22 | 23 | Highcharts: typeof Highcharts = Highcharts; 24 | 25 | chartRef: Highcharts.Chart; 26 | 27 | chartCallback: Highcharts.ChartCallbackFunction = (chart) => { 28 | this.chartRef = chart; 29 | }; 30 | 31 | fetchData(): Observable { 32 | return this.appleDataService.fetchData(); 33 | } 34 | 35 | fetchSqlData(min: number, max: number): Observable { 36 | return this.appleDataService.fetchSqlData(min, max); 37 | } 38 | 39 | chartLazyLoading: Highcharts.Options = { 40 | chart: { 41 | type: 'candlestick', 42 | zooming: { 43 | type: 'x' 44 | }, 45 | events: { 46 | load: () => { 47 | const chart = this.chartRef; 48 | const data = this.fetchData() 49 | .subscribe((data: Array<[]>) => { 50 | // Add a null value for the end date 51 | const chartData = [...data, [Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]; 52 | 53 | chart.addSeries({ 54 | type: 'candlestick', 55 | data: chartData, 56 | dataGrouping: { 57 | enabled: false 58 | } as ExtendedPlotCandlestickDataGroupingOptions 59 | }, false); 60 | 61 | chart.update({ 62 | navigator: { 63 | series: { 64 | data: chartData 65 | } 66 | } 67 | }); 68 | }); 69 | } 70 | } 71 | }, 72 | 73 | navigator: { 74 | adaptToUpdatedData: false 75 | }, 76 | 77 | scrollbar: { 78 | liveRedraw: false 79 | }, 80 | 81 | title: { 82 | text: 'AAPL history by the minute from 1998 to 2011' 83 | }, 84 | 85 | subtitle: { 86 | text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading' 87 | }, 88 | 89 | rangeSelector: { 90 | buttons: [{ 91 | type: 'hour', 92 | count: 1, 93 | text: '1h' 94 | }, { 95 | type: 'day', 96 | count: 1, 97 | text: '1d' 98 | }, { 99 | type: 'month', 100 | count: 1, 101 | text: '1m' 102 | }, { 103 | type: 'year', 104 | count: 1, 105 | text: '1y' 106 | }, { 107 | type: 'all', 108 | text: 'All' 109 | }], 110 | inputEnabled: false, // it supports only days 111 | selected: 4 // all 112 | }, 113 | 114 | xAxis: { 115 | events: { 116 | afterSetExtremes: (event) => { 117 | const chart = this.chartRef; 118 | 119 | chart.showLoading('Loading data from server...'); 120 | 121 | // Load new data depending on the selected min and max 122 | this.fetchSqlData(event.min, event.max).subscribe((data: Array<[]>) => { 123 | chart.series[0].setData(data); 124 | chart.hideLoading(); 125 | }) 126 | } 127 | }, 128 | minRange: 3600 * 1000 // one hour 129 | }, 130 | 131 | yAxis: { 132 | floor: 0 133 | } 134 | }; 135 | 136 | } 137 | -------------------------------------------------------------------------------- /src/app/line-chart/line-chart.component.css: -------------------------------------------------------------------------------- 1 | article { 2 | display: flex; 3 | } 4 | 5 | button{ 6 | margin-right: 1rem; 7 | } 8 | 9 | .buttons-wrapper { 10 | margin-top: 1.5rem; 11 | } 12 | 13 | h2 { 14 | font-family: Arial, Helvetica, sans-serif; 15 | font-size: 1.25rem; 16 | margin: 0 0 1.5rem 0; 17 | } 18 | 19 | highcharts-chart { 20 | flex-grow: 3; 21 | } 22 | 23 | section { 24 | display: flex; 25 | flex-direction: column; 26 | width: 40% 27 | } 28 | 29 | textarea { 30 | border: 1px solid #E1E1E1; 31 | border-radius: 0.5rem; 32 | } -------------------------------------------------------------------------------- /src/app/line-chart/line-chart.component.html: -------------------------------------------------------------------------------- 1 |

Demo #1: Highcharts with a basic editor

2 |
3 |
4 | 5 |
6 | 7 | 8 | 9 |
10 |
11 | 19 |
20 | -------------------------------------------------------------------------------- /src/app/line-chart/line-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import * as Highcharts from "highcharts"; 3 | import HC_customEvents from "highcharts-custom-events"; 4 | HC_customEvents(Highcharts); 5 | 6 | @Component({ 7 | selector: "app-line-chart", 8 | templateUrl: "./line-chart.component.html", 9 | styleUrls: ["./line-chart.component.css"], 10 | }) 11 | export class LineChartComponent { 12 | public Highcharts: typeof Highcharts = Highcharts; 13 | public updateFromInput = false; 14 | public showChart = true; 15 | public toggleButtonTitle = "Destroy chart"; 16 | 17 | private optFromInputString = ` 18 | { 19 | "title": { "text": "Highcharts chart" }, 20 | "series": [{ 21 | "data": [11,2,3], 22 | "zones": [{ 23 | "value": 7.2, 24 | "dashStyle": "dot", 25 | "color": "red" 26 | }] 27 | }, { 28 | "data": [5,6,7] 29 | }] 30 | } 31 | `; 32 | private optFromInput: Highcharts.Options = JSON.parse( 33 | this.optFromInputString, 34 | ); 35 | private seriesTypes = { 36 | line: "column", 37 | column: "scatter", 38 | scatter: "spline", 39 | spline: "line", 40 | }; 41 | 42 | // Demonstrate chart instance 43 | public logChartInstance(chart: Highcharts.Chart) { 44 | if (chart) { 45 | console.log("Chart instance received:", chart); 46 | } else { 47 | console.log("Chart instance destroyed"); 48 | } 49 | } 50 | 51 | public updateInputChart() { 52 | this.optFromInput = JSON.parse(this.optFromInputString); 53 | } 54 | 55 | public toggleSeriesType(index = 0) { 56 | this.optFromInput.series[index].type = this.seriesTypes[ 57 | this.optFromInput.series[index].type || "line" 58 | ] as keyof typeof this.seriesTypes; 59 | // nested change - must trigger update 60 | this.updateFromInput = true; 61 | } 62 | 63 | public toggleChart() { 64 | this.showChart = !this.showChart; 65 | this.toggleButtonTitle = this.showChart ? "Destroy chart" : "Recreate chart"; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/app/map-chart/map-chart.component.css: -------------------------------------------------------------------------------- 1 | h2 { 2 | font-family: Arial, Helvetica, sans-serif; 3 | font-size: 1.25rem; 4 | margin: 0 0 1.5rem 0; 5 | } 6 | -------------------------------------------------------------------------------- /src/app/map-chart/map-chart.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Demo #3: Highcharts Maps with the lat/lon points

3 | 10 |
-------------------------------------------------------------------------------- /src/app/map-chart/map-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import * as Highcharts from 'highcharts'; 3 | import HC_map from 'highcharts/modules/map'; 4 | import worldMap from "@highcharts/map-collection/custom/world.geo.json"; 5 | import proj4 from 'proj4'; 6 | 7 | HC_map(Highcharts); 8 | 9 | // Legacy way of map loading - see file at the path for more info. 10 | // require('../../js/worldmap')(Highcharts); 11 | 12 | @Component({ 13 | selector: 'app-map-chart', 14 | templateUrl: './map-chart.component.html', 15 | styleUrls: ['./map-chart.component.css'] 16 | }) 17 | 18 | export class MapChartComponent { 19 | 20 | Highcharts: typeof Highcharts = Highcharts; 21 | 22 | chartMap: Highcharts.Options = { 23 | chart: { 24 | map: worldMap as any, 25 | proj4: proj4 26 | }, 27 | title: { 28 | text: 'Highcharts Maps - basic demo' 29 | }, 30 | subtitle: { 31 | text: `Selected Canadian cities were marked using their lat/lon coordinates.
32 | Source map: World, Miller projection, medium resolution.` 33 | }, 34 | mapNavigation: { 35 | enabled: true, 36 | buttonOptions: { 37 | alignTo: 'spacingBox' 38 | } 39 | }, 40 | legend: { 41 | enabled: true 42 | }, 43 | colorAxis: { 44 | min: 0 45 | }, 46 | series: [{ 47 | name: 'Random data', 48 | states: { 49 | hover: { 50 | color: '#BADA55' 51 | } 52 | }, 53 | dataLabels: { 54 | enabled: true, 55 | format: '{point.name}' 56 | }, 57 | allAreas: false, 58 | data: [ 59 | ['fo', 0], 60 | ['um', 1], 61 | ['us', 2], 62 | ['jp', 3], 63 | ['sc', 4], 64 | ['in', 5], 65 | ['fr', 6], 66 | ['fm', 7], 67 | ['cn', 8], 68 | ['pt', 9], 69 | ['sw', 10], 70 | ['sh', 11], 71 | ['br', 12], 72 | ['ki', 13], 73 | ['ph', 14], 74 | ['mx', 15], 75 | ['es', 16], 76 | ['bu', 17], 77 | ['mv', 18], 78 | ['sp', 19], 79 | ['gb', 20], 80 | ['gr', 21], 81 | ['as', 22], 82 | ['dk', 23], 83 | ['gl', 24], 84 | ['gu', 25], 85 | ['mp', 26], 86 | ['pr', 27], 87 | ['vi', 28], 88 | ['ca', 29], 89 | ['st', 30], 90 | ['cv', 31], 91 | ['dm', 32], 92 | ['nl', 33], 93 | ['jm', 34], 94 | ['ws', 35], 95 | ['om', 36], 96 | ['vc', 37], 97 | ['tr', 38], 98 | ['bd', 39], 99 | ['lc', 40], 100 | ['nr', 41], 101 | ['no', 42], 102 | ['kn', 43], 103 | ['bh', 44], 104 | ['to', 45], 105 | ['fi', 46], 106 | ['id', 47], 107 | ['mu', 48], 108 | ['se', 49], 109 | ['tt', 50], 110 | ['my', 51], 111 | ['pa', 52], 112 | ['pw', 53], 113 | ['tv', 54], 114 | ['mh', 55], 115 | ['cl', 56], 116 | ['th', 57], 117 | ['gd', 58], 118 | ['ee', 59], 119 | ['ag', 60], 120 | ['tw', 61], 121 | ['bb', 62], 122 | ['it', 63], 123 | ['mt', 64], 124 | ['vu', 65], 125 | ['sg', 66], 126 | ['cy', 67], 127 | ['lk', 68], 128 | ['km', 69], 129 | ['fj', 70], 130 | ['ru', 71], 131 | ['va', 72], 132 | ['sm', 73], 133 | ['kz', 74], 134 | ['az', 75], 135 | ['tj', 76], 136 | ['ls', 77], 137 | ['uz', 78], 138 | ['ma', 79], 139 | ['co', 80], 140 | ['tl', 81], 141 | ['tz', 82], 142 | ['ar', 83], 143 | ['sa', 84], 144 | ['pk', 85], 145 | ['ye', 86], 146 | ['ae', 87], 147 | ['ke', 88], 148 | ['pe', 89], 149 | ['do', 90], 150 | ['ht', 91], 151 | ['pg', 92], 152 | ['ao', 93], 153 | ['kh', 94], 154 | ['vn', 95], 155 | ['mz', 96], 156 | ['cr', 97], 157 | ['bj', 98], 158 | ['ng', 99], 159 | ['ir', 100], 160 | ['sv', 101], 161 | ['sl', 102], 162 | ['gw', 103], 163 | ['hr', 104], 164 | ['bz', 105], 165 | ['za', 106], 166 | ['cf', 107], 167 | ['sd', 108], 168 | ['cd', 109], 169 | ['kw', 110], 170 | ['de', 111], 171 | ['be', 112], 172 | ['ie', 113], 173 | ['kp', 114], 174 | ['kr', 115], 175 | ['gy', 116], 176 | ['hn', 117], 177 | ['mm', 118], 178 | ['ga', 119], 179 | ['gq', 120], 180 | ['ni', 121], 181 | ['lv', 122], 182 | ['ug', 123], 183 | ['mw', 124], 184 | ['am', 125], 185 | ['sx', 126], 186 | ['tm', 127], 187 | ['zm', 128], 188 | ['nc', 129], 189 | ['mr', 130], 190 | ['dz', 131], 191 | ['lt', 132], 192 | ['et', 133], 193 | ['er', 134], 194 | ['gh', 135], 195 | ['si', 136], 196 | ['gt', 137], 197 | ['ba', 138], 198 | ['jo', 139], 199 | ['sy', 140], 200 | ['mc', 141], 201 | ['al', 142], 202 | ['uy', 143], 203 | ['cnm', 144], 204 | ['mn', 145], 205 | ['rw', 146], 206 | ['so', 147], 207 | ['bo', 148], 208 | ['cm', 149], 209 | ['cg', 150], 210 | ['eh', 151], 211 | ['rs', 152], 212 | ['me', 153], 213 | ['tg', 154], 214 | ['la', 155], 215 | ['af', 156], 216 | ['ua', 157], 217 | ['sk', 158], 218 | ['jk', 159], 219 | ['bg', 160], 220 | ['qa', 161], 221 | ['li', 162], 222 | ['at', 163], 223 | ['sz', 164], 224 | ['hu', 165], 225 | ['ro', 166], 226 | ['ne', 167], 227 | ['lu', 168], 228 | ['ad', 169], 229 | ['ci', 170], 230 | ['lr', 171], 231 | ['bn', 172], 232 | ['iq', 173], 233 | ['ge', 174], 234 | ['gm', 175], 235 | ['ch', 176], 236 | ['td', 177], 237 | ['kv', 178], 238 | ['lb', 179], 239 | ['dj', 180], 240 | ['bi', 181], 241 | ['sr', 182], 242 | ['il', 183], 243 | ['ml', 184], 244 | ['sn', 185], 245 | ['gn', 186], 246 | ['zw', 187], 247 | ['pl', 188], 248 | ['mk', 189], 249 | ['py', 190], 250 | ['by', 191], 251 | ['cz', 192], 252 | ['bf', 193], 253 | ['na', 194], 254 | ['ly', 195], 255 | ['tn', 196], 256 | ['bt', 197], 257 | ['md', 198], 258 | ['ss', 199], 259 | ['bw', 200], 260 | ['bs', 201], 261 | ['nz', 202], 262 | ['cu', 203], 263 | ['ec', 204], 264 | ['au', 205], 265 | ['ve', 206], 266 | ['sb', 207], 267 | ['mg', 208], 268 | ['is', 209], 269 | ['eg', 210], 270 | ['kg', 211], 271 | ['np', 212] 272 | ] 273 | } as Highcharts.SeriesMapOptions, 274 | { 275 | // Specify points using lat/lon 276 | type: 'mappoint', 277 | name: 'Canada cities', 278 | marker: { 279 | radius: 5, 280 | fillColor: 'tomato' 281 | }, 282 | data: [ 283 | { 284 | name: 'Vancouver', 285 | lat: 49.246292, 286 | lon: -123.116226 287 | }, 288 | { 289 | name: 'Quebec City', 290 | lat: 46.829853, 291 | lon: -71.254028 292 | }, 293 | { 294 | name: 'Yellowknife', 295 | lat: 62.4540, 296 | lon: -114.3718 297 | } 298 | ] 299 | } as Highcharts.SeriesMappointOptions] 300 | }; 301 | 302 | } 303 | -------------------------------------------------------------------------------- /src/app/stock-chart/stock-chart.component.css: -------------------------------------------------------------------------------- 1 | article { 2 | display: flex; 3 | } 4 | 5 | button { 6 | margin-bottom: 1rem; 7 | } 8 | 9 | h2 { 10 | font-family: Arial, Helvetica, sans-serif; 11 | font-size: 1.25rem; 12 | margin: 0 0 1.5rem 0; 13 | } 14 | 15 | highcharts-chart { 16 | min-height: 350px; flex-grow: 3; 17 | } 18 | 19 | section { 20 | display: flex; 21 | flex-direction: column; 22 | width: 40%; 23 | } -------------------------------------------------------------------------------- /src/app/stock-chart/stock-chart.component.html: -------------------------------------------------------------------------------- 1 |

Demo #2: Highcharts Stock with simple updates

2 |
3 |
4 |

Chart title text:

5 | 10 |

Data sets:

11 |
12 | 16 |
17 |
18 | 25 |
26 | -------------------------------------------------------------------------------- /src/app/stock-chart/stock-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import * as Highcharts from 'highcharts'; 3 | import HC_stock from 'highcharts/modules/stock'; 4 | import HC_customEvents from 'highcharts-custom-events'; 5 | 6 | HC_stock(Highcharts); 7 | HC_customEvents(Highcharts); 8 | 9 | 10 | // Alternative way of a plugin loading: 11 | // const HC_ce = require('highcharts-custom-events'); 12 | // HC_ce(Highcharts); 13 | 14 | @Component({ 15 | selector: 'app-stock-chart', 16 | templateUrl: './stock-chart.component.html', 17 | styleUrls: ['./stock-chart.component.css'] 18 | }) 19 | export class StockChartComponent { 20 | 21 | Highcharts: typeof Highcharts = Highcharts; 22 | 23 | // starting values 24 | updateDemo2: boolean = false; 25 | usedIndex: number = 0; 26 | chartTitle: string = 'My chart'; // for init - change through titleChange 27 | 28 | // change in all places 29 | titleChange(event: any) { 30 | var v = event; 31 | this.chartTitle = v; 32 | 33 | this.charts.forEach((el) => { 34 | el.hcOptions.title.text = v; 35 | }); 36 | 37 | // trigger ngOnChanges 38 | this.updateDemo2 = true; 39 | }; 40 | 41 | charts = [{ 42 | hcOptions: { 43 | title: { text: this.chartTitle }, 44 | subtitle: { text: '1st data set' }, 45 | plotOptions: { 46 | series: { 47 | pointStart: Date.now(), 48 | pointInterval: 86400000 // 1 day 49 | } 50 | }, 51 | series: [{ 52 | type: 'line', 53 | data: [11, 2, 3], 54 | threshold: 5, 55 | negativeColor: 'red', 56 | events: { 57 | dblclick: function () { 58 | console.log('dblclick - thanks to the Custom Events plugin'); 59 | } 60 | } 61 | }, { 62 | type: 'candlestick', 63 | 64 | data: [ 65 | [0, 15, -6, 7], 66 | [7, 12, -1, 3], 67 | [3, 10, -3, 3] 68 | ] 69 | }] 70 | } as Highcharts.Options, 71 | hcCallback: (chart: Highcharts.Chart) => { 72 | console.log('some variables: ', Highcharts, chart, this.charts); 73 | } 74 | }, { 75 | hcOptions: { 76 | title: { text: this.chartTitle }, 77 | subtitle: { text: '2nd data set' }, 78 | series: [{ 79 | type: 'column', 80 | data: [4, 3, -12], 81 | threshold: -10 82 | }, { 83 | type: 'ohlc', 84 | data: [ 85 | [0, 15, -6, 7], 86 | [7, 12, -1, 3], 87 | [3, 10, -3, 3] 88 | ] 89 | }] 90 | } as Highcharts.Options, 91 | hcCallback: () => {} 92 | }, { 93 | hcOptions: { 94 | title: { text: this.chartTitle }, 95 | subtitle: { text: '3rd data set' }, 96 | series: [{ 97 | type: 'scatter', 98 | data: [1, 2, 3, 4, 5] 99 | }, { 100 | type: 'areaspline', 101 | data: [ 102 | 5, 103 | 11, 104 | 3, 105 | 6, 106 | 0 107 | ] 108 | }] 109 | } as Highcharts.Options, 110 | hcCallback: () => {} 111 | }]; 112 | 113 | 114 | } 115 | -------------------------------------------------------------------------------- /src/app/tests/line-test/line-test.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/highcharts/highcharts-angular/65ff141ee8c11b94d8b86abeba24ff315c920186/src/app/tests/line-test/line-test.component.css -------------------------------------------------------------------------------- /src/app/tests/line-test/line-test.component.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/app/tests/line-test/line-test.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { LineTestComponent } from './line-test.component'; 4 | import { HighchartsChartModule } from '../../../../highcharts-angular/src/lib/highcharts-chart.module' 5 | 6 | 7 | describe('LineTestComponent', () => { 8 | let component: LineTestComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(waitForAsync(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [ HighchartsChartModule ], 14 | declarations: [ LineTestComponent ] 15 | }) 16 | .compileComponents(); 17 | })); 18 | 19 | beforeEach(() => { 20 | fixture = TestBed.createComponent(LineTestComponent); 21 | component = fixture.componentInstance; 22 | component.updateSeriesColor(); 23 | fixture.detectChanges(); 24 | }); 25 | 26 | it('should create', () => { 27 | expect(component).toBeTruthy(); 28 | }); 29 | 30 | it('should have data given from chartOptions', () => { 31 | const chartOptions = component.chartOptions; 32 | const chart = component.Highcharts.charts[component.Highcharts.charts.length - 1]; 33 | const series = chart.series[0] ; 34 | expect((series as any).yData).toEqual((chartOptions.series[0] as any).data); 35 | }); 36 | 37 | it('should be properly updated', () => { 38 | const chart = component.Highcharts.charts[component.Highcharts.charts.length - 1]; 39 | const series = chart.series[0] as unknown as Highcharts.SeriesLineOptions; 40 | expect(series.color).toEqual('hotpink'); 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /src/app/tests/line-test/line-test.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import * as Highcharts from 'highcharts'; 3 | 4 | interface ExtendedSeriesCandlestickOptions extends Highcharts.SeriesCandlestickOptions { 5 | color: Highcharts.ColorType; 6 | } 7 | 8 | @Component({ 9 | selector: 'app-line-test', 10 | templateUrl: './line-test.component.html', 11 | styleUrls: ['./line-test.component.css'] 12 | }) 13 | export class LineTestComponent { 14 | Highcharts: typeof Highcharts = Highcharts; 15 | updateFlag = false; 16 | 17 | chartOptions: Highcharts.Options = { 18 | series: [ 19 | { 20 | type: 'line', 21 | data: [1, 2, 3] 22 | } 23 | ] 24 | }; 25 | 26 | updateSeriesColor() { 27 | (this.chartOptions.series[0] as ExtendedSeriesCandlestickOptions).color = 'hotpink'; 28 | this.updateFlag = true; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/highcharts/highcharts-angular/65ff141ee8c11b94d8b86abeba24ff315c920186/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/highcharts/highcharts-angular/65ff141ee8c11b94d8b86abeba24ff315c920186/src/favicon.ico -------------------------------------------------------------------------------- /src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*'; -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | highcharts-angular 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
Loading...
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import "./polyfills"; 2 | import { enableProdMode } from "@angular/core"; 3 | import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; 4 | import { AppModule } from "./app/app.module"; 5 | import { environment } from "./environments/environment"; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule) 13 | .catch(err => console.log(err)); 14 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/set'; 35 | 36 | /** Evergreen browsers require these. **/ 37 | import "core-js/es/reflect"; 38 | /*************************************************************************************************** 39 | * Zone JS is required by Angular itself. 40 | */ 41 | import "zone.js"; // Included with Angular CLI. 42 | 43 | /*************************************************************************************************** 44 | * APPLICATION IMPORTS 45 | */ 46 | 47 | /** 48 | * Date, currency, decimal and percent pipes. 49 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 50 | */ 51 | // import 'intl'; // Run `npm install --save intl`. 52 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare var __karma__: any; 17 | 18 | // Prevent Karma from running prematurely. 19 | __karma__.loaded = function () {}; 20 | 21 | // First, initialize the Angular testing environment. 22 | getTestBed().initTestEnvironment( 23 | BrowserDynamicTestingModule, 24 | platformBrowserDynamicTesting(), { 25 | teardown: { destroyAfterEach: false } 26 | } 27 | ); 28 | // Finally, start Karma to run the tests. 29 | __karma__.start(); 30 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /tasks/build.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Build script to create the library package, and then copy over 3 | * the LICENSE and README.md files in a cross-platform manner. 4 | */ 5 | 6 | const child_process = require( 'child_process' ), 7 | fs = require( 'fs' ), 8 | path = require( 'path' ); 9 | 10 | const rootDir = path.normalize( __dirname + '/..' ), 11 | distDir = `${rootDir}/dist/highcharts-angular`, 12 | ngLocation = `${rootDir}/node_modules/@angular/cli/bin/ng`.replace( /\//g, path.sep ); 13 | 14 | 15 | // Build the package 16 | child_process.spawnSync( 'node', [ ngLocation, 'build', 'highcharts-angular', '--configuration=production' ], { cwd: rootDir, stdio: 'inherit' } ); 17 | 18 | // Copy License and Readme to package 19 | console.log( 'Copying ./LICENSE to dist/highcharts-angular/LICENSE' ); 20 | fs.copyFileSync( `${rootDir}/LICENSE`, `${distDir}/LICENSE` ); 21 | 22 | console.log( 'Copying ./README.md to dist/highcharts-angular/README.md' ); 23 | fs.copyFileSync( `${rootDir}/README.md`, `${distDir}/README.md` ); 24 | -------------------------------------------------------------------------------- /tasks/publish.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Publishes the package from the dist/highcharts-angular directory. 3 | * Note: publishing manually, but keeping the file just in case. 4 | */ 5 | 6 | const child_process = require( 'child_process' ), 7 | path = require( 'path' ); 8 | 9 | const rootDir = path.normalize( __dirname + '/..' ), 10 | distDir = `${rootDir}/dist/highcharts-angular`; 11 | 12 | // Publish 13 | child_process.spawnSync( 'npm', [ 'publish' ], { cwd: distDir, stdio: 'inherit' } ); 14 | -------------------------------------------------------------------------------- /tasks/release.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Prepare for release. 3 | * Copy CHANGELOG.md up into the main dir. 4 | */ 5 | 6 | const fs = require('fs'), 7 | path = require('path'); 8 | 9 | const rootDir = path.normalize(__dirname + '/..'), 10 | codeDir = `${rootDir}/highcharts-angular`; 11 | 12 | // Copy CHANGELOG.md to the main folder for GitHub 13 | console.log('Copying ./highcharts-angular/CHANGELOG.md to the main directory'); 14 | fs.copyFileSync(`${codeDir}/CHANGELOG.md`, `${rootDir}/CHANGELOG.md`); 15 | 16 | // Further instructions 17 | console.log('-------------------------------------------------------'); 18 | console.log('Add moved CHANGELOG.md and `git commit --amend` it'); 19 | console.log('Push as `git push --follow-tags origin master`'); 20 | console.log('Publish in `./dist/highcharts-angular` as `npm publish`'); -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "tsconfig.app", 6 | "types": [], 7 | "paths": { 8 | "highcharts-angular": [ 9 | "../dist/highcharts-angular" 10 | ], 11 | "highcharts-angular/*": [ 12 | "../dist/highcharts-angular/*" 13 | ] 14 | } 15 | }, 16 | "files": [ 17 | "src/main.ts", 18 | "src/polyfills.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "allowSyntheticDefaultImports": true, 5 | "baseUrl": "./", 6 | "downlevelIteration": true, 7 | "outDir": "./dist/out-tsc", 8 | "sourceMap": true, 9 | "declaration": false, 10 | "module": "es2020", 11 | "moduleResolution": "node", 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "resolveJsonModule": true, 15 | "target": "ES2022", 16 | "typeRoots": [ 17 | "node_modules/@types" 18 | ], 19 | "lib": [ 20 | "es2018", 21 | "dom" 22 | ], 23 | "useDefineForClassFields": false 24 | }, 25 | "angularCompilerOptions": { 26 | "fullTemplateTypeCheck": true 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "paths": { 6 | "highcharts-angular": ["../dist/highcharts-angular"], 7 | "highcharts-angular/*": ["../dist/highcharts-angular/*"] 8 | }, 9 | "outDir": "./out-tsc/spec", 10 | "types": [ 11 | "jasmine", 12 | "node" 13 | ] 14 | }, 15 | "files": [ 16 | "src/test.ts", 17 | "src/polyfills.ts" 18 | ], 19 | "include": [ 20 | "src/**/*.spec.ts", 21 | "src/**/*.d.ts" 22 | ] 23 | } 24 | 25 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "callable-types": true, 7 | "class-name": true, 8 | "comment-format": [ 9 | true, 10 | "check-space" 11 | ], 12 | "curly": true, 13 | "deprecation": { 14 | "severity": "warning" 15 | }, 16 | "eofline": true, 17 | "forin": true, 18 | "import-blacklist": [true, "rxjs"], 19 | "import-spacing": true, 20 | "indent": [ 21 | true, 22 | "spaces" 23 | ], 24 | "interface-over-type-literal": true, 25 | "label-position": true, 26 | "max-line-length": [ 27 | true, 28 | 140 29 | ], 30 | "member-access": false, 31 | "member-ordering": [ false ], 32 | "no-arg": true, 33 | "no-bitwise": true, 34 | "no-console": [ 35 | true, 36 | "debug", 37 | "info", 38 | "time", 39 | "timeEnd", 40 | "trace" 41 | ], 42 | "no-construct": true, 43 | "no-debugger": true, 44 | "no-duplicate-variable": true, 45 | "no-empty": false, 46 | "no-empty-interface": true, 47 | "no-eval": true, 48 | "no-shadowed-variable": true, 49 | "no-string-literal": false, 50 | "no-string-throw": true, 51 | "no-switch-case-fall-through": true, 52 | "no-trailing-whitespace": true, 53 | "no-unused-expression": true, 54 | "object-literal-sort-keys": false, 55 | "one-line": [ 56 | true, 57 | "check-open-brace", 58 | "check-catch", 59 | "check-else", 60 | "check-whitespace" 61 | ], 62 | "quotemark": [ 63 | true, 64 | "single" 65 | ], 66 | "radix": true, 67 | "semicolon": [ 68 | "always" 69 | ], 70 | "triple-equals": [ 71 | true, 72 | "allow-null-check" 73 | ], 74 | "typedef-whitespace": [ 75 | true, 76 | { 77 | "call-signature": "nospace", 78 | "index-signature": "nospace", 79 | "parameter": "nospace", 80 | "property-declaration": "nospace", 81 | "variable-declaration": "nospace" 82 | } 83 | ], 84 | "unified-signatures": true, 85 | "variable-name": false, 86 | "whitespace": [ 87 | true, 88 | "check-branch", 89 | "check-decl", 90 | "check-operator", 91 | "check-separator", 92 | "check-type" 93 | ], 94 | 95 | "directive-selector": [true, "attribute", "app", "camelCase"], 96 | "component-selector": [true, "element", "app", "kebab-case"], 97 | "no-inputs-metadata-property": true, 98 | "no-outputs-metadata-property": true, 99 | "no-host-metadata-property": true, 100 | "no-input-rename": true, 101 | "no-output-rename": true, 102 | "use-lifecycle-interface": true, 103 | "use-pipe-transform-interface": true, 104 | "component-class-suffix": true, 105 | "directive-class-suffix": true 106 | } 107 | } 108 | --------------------------------------------------------------------------------