https://github.com/jscharting/jscharting-angular
Official JSCharting Samples for Angular
https://github.com/jscharting/jscharting-angular
angular chart jscharting
Last synced: about 1 month ago
JSON representation
Official JSCharting Samples for Angular
- Host: GitHub
- URL: https://github.com/jscharting/jscharting-angular
- Owner: jscharting
- Created: 2018-11-19T17:01:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:35:47.000Z (over 3 years ago)
- Last Synced: 2025-04-02T18:52:30.744Z (about 1 year ago)
- Topics: angular, chart, jscharting
- Language: TypeScript
- Homepage:
- Size: 771 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 27
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# JSCharting: Any Chart. Anywhere.
**JSCharting** is a JavaScript chart library for visualizing your data, providing resolution
independent results across all devices and platorms. Every JSCharting license includes the
full suite of 150+ advanced chart types, interactive stock charts and JSMapping at no additional charge.
## Official JSCharting Samples for Angular
This set of samples demonstrate how to use JSCharting with the Angular framework. Samples are located in the `src/app/samples` folder.
### How to use
Install the necessary packages including JSCharting.
```console
npm install
```
Run the webpack dev server: http://localhost:4200/
```console
npm run start
```
Or build the dashboard manually.
```console
npm run build
```
Or.
```console
npm run build-prod
```
### How it works
1) In your component import Chart and create an instance.
```typescript
import {Chart} from 'jscharting';
this.chart = new Chart({});
```
----
2) In your app module, import the `JSChartingModule` module and add it to the `imports`:
```typescript
import {JSChartingModule} from './jscharting/jscharting.module';
@NgModule({
imports: [
JSChartingModule
]
})
export class AppModule {}
```
----
3) Inject the `JSChartingService` into your app component, create a '
' element with reference `chartTargetElement: ElementRef`.
```typescript
import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
import {Chart} from './jscharting/jscharting';
import {JSChartingService} from './shared/jscharting.service';
@Component({
template: '
'
})
export class AppComponent implements AfterViewInit, OnDestroy {
@ViewChild('chartTargetElement') chartTargetElement: ElementRef;
private chart: Chart;
constructor(private chartService: JSChartingService) {
}
ngAfterViewInit(): void {
this.chart = this.chartService.chart({
targetElement: this.chartTargetElement.nativeElement
});
}
ngOnDestroy(): void {
if (this.chart) {
this.chart.destroy();
}
}
```
Make sure you destroy chart in `ngOnDestroy` method.
----
4) Rather than using `JSChartingService` you can instead use the `appJSCharting` directive:
```typescript
import {Component, OnInit} from '@angular/core';
import {JSCChartConfig} from './jscharting/jscharting';
@Component({
template: '
'
})
export class AppComponent implements OnInit {
public chartOptions = {
...
};
ngOnInit(): void {
// You can update config.
this.chartOptions = {};
}
}
```
It is easer to use `appJSCharting` directive than service or create chart directly.
----
Please see full samples in the `src/app/samples` folder.