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.
Type Name Latest commit message Commit time
Failed to load latest commit information.

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';

	imports: [
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';

	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) {

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';

	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.