Gathering detailed insights and metrics for highcharts-angular
Gathering detailed insights and metrics for highcharts-angular
Gathering detailed insights and metrics for highcharts-angular
Gathering detailed insights and metrics for highcharts-angular
@folkehelseinstituttet/angular-highcharts
_An opinionated wrapper to the official minimal [Highcharts wrapper for Angular](https://github.com/highcharts/highcharts-angular)_
angular-highcharts
[![NPM version](https://img.shields.io/npm/v/angular-highcharts.svg)](https://npmjs.org/package/angular-highcharts) [![NPM downloads](https://img.shields.io/npm/dt/angular-highcharts.svg)](https://npmjs.org/package/angular-highcharts) ![](https://github.c
highcharts
JavaScript charting framework
highcharts-react-official
Official minimal [Highcharts](https://www.highcharts.com/) wrapper for React.
Highcharts official integration for Angular
npm install highcharts-angular
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
431 Stars
241 Commits
118 Forks
30 Watching
8 Branches
57 Contributors
Updated on 11 Nov 2024
TypeScript (74.12%)
JavaScript (13.82%)
HTML (8.53%)
CSS (3.52%)
Cumulative downloads
Total Downloads
Last day
-1.4%
25,104
Compared to previous day
Last week
3.5%
120,056
Compared to previous week
Last month
10.4%
488,761
Compared to previous month
Last year
2.8%
5,506,043
Compared to previous year
1
3
Official minimal Highcharts integration for Angular
Make sure you have node, NPM and Angular up to date.
Version | Node | Angular | Highcharts |
---|---|---|---|
4.0.0 | >=16.14 | >=16.0.0 | >=11.0.0 |
3.1.2 | >=14.13 | >=15.0.0 | >=10.3.3 |
3.0.0 | >=14.13 | >=9.0.0 | >=8.0.0 |
<2.10.0 | >=6.10.2 | >=6.0.0 | >=6.0.0 |
Get package from NPM in your Angular app:
1npm install highcharts-angular --save
In your app.module.ts add the HighchartsChartModule:
1... 2import { HighchartsChartModule } from 'highcharts-angular'; 3 4@NgModule({ 5 imports: [ 6 ... 7 HighchartsChartModule
In a component that will be building your Highcharts charts you will need to import Highcharts first, so in system console, while in your Angular app:
1npm install highcharts --save
Next, in the app.component.ts, in top lines where other import
s are add another one for Highcharts:
1import * as Highcharts from 'highcharts';
In the same file (app.component.ts) add to the template Highcharts-angular component selector highcharts-chart
:
1<highcharts-chart 2 [Highcharts]="Highcharts" 3 4 [constructorType]="chartConstructor" 5 [options]="chartOptions" 6 [callbackFunction]="chartCallback" 7 8 [(update)]="updateFlag" 9 [oneToOne]="oneToOneFlag" 10 [runOutsideAngular]="runOutsideAngular" 11 12 style="width: 100%; height: 400px; display: block;" 13></highcharts-chart>
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 <highcharts-chart>
, so you should set some styles.
In the same file (app.component.ts) all variables should be set in export class AppComponent {
like:
1export class AppComponent { 2 Highcharts: typeof Highcharts = Highcharts; // required 3 chartConstructor: string = 'chart'; // optional string, defaults to 'chart' 4 chartOptions: Highcharts.Options = { ... }; // required 5 chartCallback: Highcharts.ChartCallbackFunction = function (chart) { ... } // optional function, defaults to null 6 updateFlag: boolean = false; // optional boolean 7 oneToOneFlag: boolean = true; // optional boolean, defaults to false 8 runOutsideAngular: boolean = false; // optional boolean, defaults to false 9 ...
Used options are explained below.
To create a simple demo start with installing.
Next for app.component.ts
's HTML template use:
1<highcharts-chart 2 [Highcharts]="Highcharts" 3 [options]="chartOptions" 4 5 style="width: 100%; height: 400px; display: block;" 6></highcharts-chart>
and export variables:
1export class AppComponent { 2 Highcharts: typeof Highcharts = Highcharts; 3 chartOptions: Highcharts.Options = { 4 series: [{ 5 data: [1, 2, 3], 6 type: 'line' 7 }] 8 }; 9 ...
Build and run your Angular app to see a basic line chart.
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.
Because Highcharts is strictly bound with the browser events we need to prevent it from running on the server-side.
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.
1export class AppComponent { 2 isHighcharts = typeof Highcharts === 'object'; 3 Highcharts: typeof Highcharts = Highcharts; 4 chartOptions: Highcharts.Options = {...}; 5}
1<highcharts-chart 2 *ngIf="isHighcharts" 3 [Highcharts]="Highcharts" 4 [options]="chartOptions" 5></highcharts-chart>
First, install angular elements:
1npm install @angular/elements --save
Include in main.ts file your element tag inside allowedTags and element properties inside allowedAttributes:
1if (Highcharts && Highcharts.AST) { 2 Highcharts.AST.allowedTags.push('translation-element'); 3 Highcharts.AST.allowedAttributes.push('translation-key'); 4}
Define your element in the constructor of the component that will use it:
1private defineTranslationElement() {
2 if (isNil(customElements.get('translation-element'))) {
3 const translationElement = createCustomElement(TranslationComponent, {
4 injector: this.injector,
5 });
6 customElements.define('translation-element', translationElement);
7 }
8}
Then, create the element, set properties and use it in the chart:
1const translationEl: NgElement & WithProperties<TranslationComponent> =
2 document.createElement(translationElementTag);
3
4translationEl.setAttribute(
5 'translation-key',
6 'shared.title'
7);
8
9const chartOptions: Highcharts.Options = {
10 title: {
11 text: translationEl.outerHTML,
12 useHTML: true,
13 },
14 xAxis: [
15 ...
For a more detailed view take a look at the Online Examples - Angular Elements and useHTML
Parameter | Type | Required | Defaults | Description |
---|---|---|---|---|
[Highcharts] | Object | yes | - | This is a Highcharts instance with required core and optional modules, plugin, maps, wrappers, and set global options using setOptions . More detail for the option in the next documentation section. |
[constructorType] | String | no | 'chart' | String for constructor method. Official constructors: - 'chart' for Highcharts charts - 'stockChart' for Highcharts Stock - 'mapChart' for Highcharts Maps - 'ganttChart' for Highcharts GanttKeep in mind that 'stockChart' , 'mapChart' , 'ganttChart' require loading the appropriate package or module. |
[options] | Object | yes | - | Possible chart options could be found in Highcharts API reference.The minimal working object that could be set for basic testing is { series:[{ data:[1, 2] }] } . |
[(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. |
[oneToOne] | Boolean | no | false | The oneToOne parameter for updates. 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 in the first chart - try setting new chart options with different amounts of series in the textarea input to see this option in action. |
[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. |
[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. This option is more useful for bigger, more complex application (see discussion). The option is presented in this demo. |
A chart instance could be obtained using:
chart
is provided as first argument (see demo app and first hcCallback
function)chartInstance
- emitted after chart is created (see demo app and logChartInstance
function)Notice: If you are getting chart instance from chart's load event 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.
This is a Highcharts instance optionally with initialized modules, plugins, maps, wrappers and set global options using setOptions
. The core is required.
Notice: The Highcharts instance is shared through components in an Angular app, so loaded modules will affect all charts.
As core you could load Highcharts, Highcharts Stock, Highcharts Maps or Highcharts Gantt (v. 6.2.0+).
1import * as Highcharts from 'highcharts';
1import * as Highcharts from 'highcharts/highstock';
or as Highcharts with stock module:
1import * as Highcharts from 'highcharts'; 2import HC_stock from 'highcharts/modules/stock'; 3HC_stock(Highcharts);
1import * as Highcharts from 'highcharts/highmaps';
or as Highcharts with map module:
1import * as Highcharts from 'highcharts'; 2import HC_map from 'highcharts/modules/map'; 3HC_map(Highcharts);
1import * as Highcharts from 'highcharts/highcharts-gantt';
or as Highcharts with gantt module:
1import * as Highcharts from 'highcharts'; 2import HC_gantt from 'highcharts/modules/gantt'; 3HC_gantt(Highcharts);
A module is a Highcharts official addon - including Highcharts Stock Technical Indicators, style themes, specialized series types (e.g. Bullet, Venn). After Highcharts is imported using Highcharts, Highcharts Stock or Highcharts Maps use import
and initialize each module on the Highcharts variable.
1import * as Highcharts from 'highcharts'; 2import HC_exporting from 'highcharts/modules/exporting'; 3HC_exporting(Highcharts);
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.
1import * as Highcharts from 'highcharts'; 2require('highcharts/modules/exporting')(Highcharts);
A plugin is a third party/community made Highcharts addon (plugins are listed in the Highcharts plugin registry). First, make sure that a plugin support loading over NPM and load the required files. In example Custom-Events supports NPM loading, so after installing the package you could initialize it like:
1import * as Highcharts from 'highcharts'; 2import * as HC_customEvents from 'highcharts-custom-events'; 3HC_customEvents(Highcharts);
If a plugin doesn't support loading through NPM you could treat it as a wrapper - see instructions below.
If a lack of TypeScirpt definitions d.ts
is showing as an error - see Solving problems section of Highcharts documentation for Typescript usage.
Official map collection is published and here are basic instructions for loading a map. An example can also be found in the demo app.
A wrapper is a custom extension 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:
1(function (factory) { 2 if (typeof module === 'object' && module.exports) { 3 module.exports = factory; 4 } else { 5 factory(Highcharts); 6 } 7}(function (Highcharts) { 8 9... 10/* wrapper code */ 11... 12 13}));
Next, you will be loading a local .js file, so you should add in tsconfig.json
in your app allowJs: true
:
1... 2"compilerOptions": { 3 "allowJs": true, 4 ...
The wrapper is ready to be imported to your app. Use require
instead of import to prevent TS5055 errors.
1import * as Highcharts from 'highcharts'; 2require('./relative-path-to-the-wrapper-file/wrapper-file-name')(Highcharts);
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.
If a lack of TypeScirpt definitions d.ts
is showing as an error - see Solving problems section of Highcharts documentation for Typescript usage.
setOptions
The best place to use setOptions
is after your Highcharts instance is ready and before Highcharts variable is set in the main component. Example:
1import * as Highcharts from 'highcharts/highstock';
2
3...
4
5Highcharts.setOptions({
6 title: {
7 style: {
8 color: 'orange'
9 }
10 }
11});
12
13...
14
15export class AppComponent {
16 Highcharts: typeof Highcharts = Highcharts;
Download (or clone) the contents of the highcharts-angular GitHub repository.
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.
In system console, in main repo folder run:
1npm install 2npm start
This opens http://localhost:4200/ in your default browser with the app.
To open on a different port, for example 12345
, use:
1npm start -- --port 12345
Keep the console running and change some files - after a save the app will rebuild and refresh the localhost preview.
src\app
)Contains Angular main component that uses the chart component.
src\app\chart
)Contains the chart component that creates Highcharts chart.
XXX
does not exist on type YYY
Using Angular CLI v6, the library must be manually rebuilt on each change in order to reflect in the demo app.
Run the following command on each change to the highcharts-chart.component.ts
file:
1npm run build
If you are running the demo app in another terminal window when you rebuild the library, the changes should be reflected in your browser (note: you may need to refresh the browser a second time after the live reload in order to see the change).
See https://github.com/angular/angular-cli/wiki/stories-create-library for details on library builds.
For CHANGELOG.md update use npm run release
.
For technical support please contact Highcharts technical support.
For TypeScript problems with Highcharts first see Highcharts documentation for TypeScript usage.
Add indicators as any other module. Live demo
Add themes as any other module. See the demo app in this repository for an example.
More info about custom themes in Highcharts general documentation.
The correct repository to report such issues is main Highcharts repository.
Based on original Highcharts demo for Synchronized charts.
Additionally added class based sync between charts - demo.
XXX
does not exist on type YYY
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.
Install the proj4
library and its types @types/proj4
. Then pass it to chartOptions.chart.proj4
property. See the demo app in this repository or live demo example.
To render angular component within the chart you can use the angular portals - demo
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
Reason
Found 6/13 approved changesets -- score normalized to 4
Reason
2 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 2
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More