Skip to content
Official JSCharting Samples for Angular 6
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
src
.gitignore
angular.json
package-lock.json
package.json
readme.md
tsconfig.json
tslint.json

readme.md

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 6

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

  1. In your component import Chart and create an instance.
import {Chart} from './jscharting/jscharting';

this.chart = new Chart({});

  1. In your app module, import the JSChartingModule module and add it to the imports:
import {JSChartingModule} from './jscharting/jscharting.module';

@NgModule({
	imports: [
	JSChartingModule
	]
})
export class AppModule {}

  1. Inject the JSChartingService into your app component, create a '
    ' element with reference chartTargetElement: ElementRef.
import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';

import {Chart} from './jscharting/jscharting';
import {JSChartingService} from './shared/jscharting.service';

@Component({
	template: '<div><div #chartTargetElement class="chart-container"></div></div>'
})
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.


  1. Rather than using JSChartingService you can instead use the appJSCharting directive:
import {Component, OnInit} from '@angular/core';

import {JSCChartConfig} from './jscharting/jscharting';

@Component({
	template: '<div><div appJSCharting [options]="chartOptions" class="chart-container"></div></div>'
})
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.

You can’t perform that action at this time.