import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as CanvasJS from 'canvasjs';

@Component({
  selector: 'app-canvas-js',
  templateUrl: './canvas-jsponent.html',
  styleUrls: ['./canvas-jsponent.scss']
})
export class CanvasJsComponent implements OnInit {
canvasChartData: any;
  canvasChartDataCopy: number[];
  canvasChart: any;
  canvasChartContext: any;

  constructor() { }

  ngOnInit() {
  let dataPoints = [];
	let y = 0;		
	for ( var i = 0; i < 10000; i++ ) {		  
		y += Math.round(5 + Math.random() * (-5 - 5));	
		dataPoints.push({ y: y});
	}
	let chart = new CanvasJS.Chart("canvasjsContainer", {
		zoomEnabled: true,
	  animationEnabled: true,
		exportEnabled: true,
		title: {
			text: "Performance Demo - 10000 DataPoints"
		},
		subtitles:[{
			text: "Try Zooming and Panning"
		}],
		data: [
		{
			type: "line",                
			dataPoints: dataPoints
		}]
	});
		
	chart.render();
}
}

<div id="canvasjsContainer" style="height: 400px; width: 80%; margin: 10%;"></div>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as CanvasJS from 'canvasjs';

@Component({
  selector: 'app-canvas-js',
  templateUrl: './canvas-js.ponent.html',
  styleUrls: ['./canvas-js.ponent.scss']
})
export class CanvasJsComponent implements OnInit {
canvasChartData: any;
  canvasChartDataCopy: number[];
  canvasChart: any;
  canvasChartContext: any;

  constructor() { }

  ngOnInit() {
  let dataPoints = [];
	let y = 0;		
	for ( var i = 0; i < 10000; i++ ) {		  
		y += Math.round(5 + Math.random() * (-5 - 5));	
		dataPoints.push({ y: y});
	}
	let chart = new CanvasJS.Chart("canvasjsContainer", {
		zoomEnabled: true,
	  animationEnabled: true,
		exportEnabled: true,
		title: {
			text: "Performance Demo - 10000 DataPoints"
		},
		subtitles:[{
			text: "Try Zooming and Panning"
		}],
		data: [
		{
			type: "line",                
			dataPoints: dataPoints
		}]
	});
		
	chart.render();
}
}

<div id="canvasjsContainer" style="height: 400px; width: 80%; margin: 10%;"></div>

I tried the sample given in official website of Canvas JS with Angular5. Tried with npm install. But on build of angular application, giving build error as: | export ColumnChart from '../charts/column'; | export StackedColumnChart from '../charts/stacked_column';

Not getting how to solve this issue. Using v1.8.0 of Canvas JS.

• javascript
• charts
• angular5
• canvasjs

1 Answer 1

CanvasJS doesn’t have official npm package published yet. The package that you are using through npm is not an official one but from a third party.

You can save CanvasJS library (canvasjs.min.js) in source folder of your project (‘src/app’ or ‘src/app/assets/js’ or ‘src/app/lib’) and import it to your app using import * as CanvasJS from './canvasjs.min' (path may vary based on file location like ‘./assets/js/canvasjs.min’ or ‘./lib/canvasjs.min’).

Here is a sample project showing how to import CanvasJS Charts in your Angular 5 App.