Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cebor/angular-highcharts
Highcharts directive for Angular
https://github.com/cebor/angular-highcharts
angular chart highcharts
Last synced: about 1 month ago
JSON representation
Highcharts directive for Angular
- Host: GitHub
- URL: https://github.com/cebor/angular-highcharts
- Owner: cebor
- License: mit
- Created: 2016-04-05T19:12:32.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-02-09T16:42:51.000Z (11 months ago)
- Last Synced: 2024-10-29T23:50:24.195Z (2 months ago)
- Topics: angular, chart, highcharts
- Language: TypeScript
- Homepage:
- Size: 3.23 MB
- Stars: 214
- Watchers: 14
- Forks: 64
- Open Issues: 79
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular-highcharts - Highcharts directive for Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-highcharts - Highcharts directive for Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-highcharts - Highcharts directive for Angular. (Table of contents / Third Party Components)
README
# angular-highcharts
[](https://npmjs.org/package/angular-highcharts)
[](https://npmjs.org/package/angular-highcharts)
This is a directive for an easy usage of [Highcharts](https://www.highcharts.com/) with angular.
## Requirements
```json
{
"angular": "^15.1.1",
"highcharts": "^10.3.3"
}
```
## Installation
### yarn
```bash
# install angular-highcharts and highcharts
yarn add angular-highcharts highcharts
```
### npm
```bash
# install angular-highcharts and highcharts
npm i --save angular-highcharts highcharts
```
## Usage Example
```typescript
// app.module.ts
import { ChartModule } from 'angular-highcharts';
@NgModule({
imports: [
ChartModule // add ChartModule to your imports
]
})
export class AppModule {}
```
```typescript
// chart.component.ts
import { Chart } from 'angular-highcharts';
@Component({
template: `
Add Point!
`
})
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));
}
}
```
## API Docs
### Chart
The Chart object.
Type: `class`
#### Constructor
```typescript
new Chart(options: Options)
```
#### Properties
```typescript
ref: Highcharts.Chart;
```
Deprecated. Please use `ref$`.
```typescript
ref$: Observable
```
Observable that emits a Highcharts.Chart - [Official Chart API Docs](https://api.highcharts.com/class-reference/Highcharts.Chart)
#### Methods
```typescript
addPoint(point: Point, [serieIndex: number = 0]): void
```
Adds a point to a serie
```typescript
removePoint(pointIndex: number, [serieIndex: number = 0], [redraw: boolean = true], [shift: boolean = false]): void
```
Removes a point from a serie
```typescript
addSeries(series: ChartSerie): void
```
Adds a series to the chart
```typescript
removeSeries(seriesIndex: number): void
```
Remove series from the chart
### StockChart
The Chart object.
Type: `class`
#### Constructor
```typescript
new StockChart(options);
```
#### Properties
```typescript
ref: Highstock.Chart;
```
Deprecated. Please use `ref$`.
```typescript
ref$: Observable
```
Observable that emits a Highstock.Chart
### MapChart
The Chart object.
Type: `class`
#### Constructor
```typescript
new MapChart(options);
```
#### Properties
```typescript
ref;
```
Deprecated. Please use `ref$`.
```typescript
ref$;
```
Observable that emits a Highmaps.Chart
## Using Highcharts modules
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.
### Example
```typescript
// 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 { }
```
## Troubleshooting
### Compile Issues
If you expiring typing errors while you build/serve your angular app the following could be helpful:
```ts
// override options type with
chart = new Chart({ options } as any);
```
This is very useful when using `gauge chart` type.
### Loading Highcharts Modules manually
See Official Highcharts Docs: http://www.highcharts.com/docs/getting-started/install-from-npm
## Demo
* [Demo](https://angular-9nkrgd.stackblitz.io)
* [Code](https://stackblitz.com/edit/angular-9nkrgd)
## License
MIT © Felix Itzenplitz