Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
angular-highcharts
Advanced tools
Readme
This is a directive for an easy usage of Highcharts with angular.
{
"angular": "^15.1.1",
"highcharts": "^10.3.3"
}
# install angular-highcharts and highcharts
yarn add angular-highcharts highcharts
# install angular-highcharts and highcharts
npm i --save angular-highcharts highcharts
// app.module.ts
import { ChartModule } from 'angular-highcharts';
@NgModule({
imports: [
ChartModule // add ChartModule to your imports
]
})
export class AppModule {}
// chart.component.ts
import { Chart } from 'angular-highcharts';
@Component({
template: `
<button (click)="add()">Add Point!</button>
<div [chart]="chart"></div>
`
})
export class ChartComponent {
chart = new Chart({
chart: {
type: 'line'
},
title: {
text: 'Linechart'
},
credits: {
enabled: false
},
series: [
{
name: 'Line 1',
data: [1, 2, 3]
}
]
});
// add point to chart serie
add() {
this.chart.addPoint(Math.floor(Math.random() * 10));
}
}
The Chart object.
Type: class
new Chart(options: Options)
ref: Highcharts.Chart;
Deprecated. Please use ref$
.
ref$: Observable<Highcharts.Chart>
Observable that emits a Highcharts.Chart - Official Chart API Docs
addPoint(point: Point, [serieIndex: number = 0]): void
Adds a point to a serie
removePoint(pointIndex: number, [serieIndex: number = 0], [redraw: boolean = true], [shift: boolean = false]): void
Removes a point from a serie
addSeries(series: ChartSerie): void
Adds a series to the chart
removeSeries(seriesIndex: number): void
Remove series from the chart
The Chart object.
Type: class
new StockChart(options);
ref: Highstock.Chart;
Deprecated. Please use ref$
.
ref$: Observable<Highstock.Chart>
Observable that emits a Highstock.Chart
The Chart object.
Type: class
new MapChart(options);
ref;
Deprecated. Please use ref$
.
ref$;
Observable that emits a Highmaps.Chart
To use Highcharts modules you have to import them and provide them in a factory (required for aot).
You can find the list of available modules in the highcharts folder ls -la node_modules/highcharts/modules
.
Hint: Highcharts-more is a exception, you find this module in the root folder.
Don't forget to use the modules with the .src
suffix, minimized highcharts modules are not importable.
// app.module.ts
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as exporting from 'highcharts/modules/exporting.src';
@NgModule({
providers: [
{ provide: HIGHCHARTS_MODULES, useFactory: () => [ more, exporting ] } // add as factory to your providers
]
})
export class AppModule { }
If you expiring typing errors while you build/serve your angular app the following could be helpful:
// override options type with <any>
chart = new Chart({ options } as any);
This is very useful when using gauge chart
type.
See Official Highcharts Docs: http://www.highcharts.com/docs/getting-started/install-from-npm
MIT © Felix Itzenplitz
FAQs
[![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
The npm package angular-highcharts receives a total of 16,664 weekly downloads. As such, angular-highcharts popularity was classified as popular.
We found that angular-highcharts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.