Canvas JS issue with Angular5

Question

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

@Component({
  selector: 'app-canvas-js',
  templateUrl: './canvas-js.component.html',
  styleUrls: ['./canvas-js.component.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.

Vishwas R · Accepted Answer · 2018-06-27 04:22:03Z

4

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.

answered Jun 27, 2018 at 4:22

Vishwas R

3,4301 gold badge20 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CodeMan Over a year ago

...Thanks a lot for your help.

Collectives™ on Stack Overflow

Canvas JS issue with Angular5

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related