Canvas JS issue with Angular5 for ColumnChart and StackedColumnChart

• June 26, 2018 at 10:20 am #21245
  
  sadashiv

  Tried with an example given in official website of Canvas JS. Installed canvas js with npm for our angular application. npm install gave v1.8.0 of canvasjs. But not able to render chart and giving angular build error before application load as:

  | export ColumnChart from ‘../charts/column’;
  | export StackedColumnChart from ‘../charts/stacked_column’;

  Not able to get it and how to solve this problem. Appreciate the help here. Please find below sample example from canvasjs.com, that I tried with our angular5 application.

  ——–HTML——
  <div id=”canvasjsContainer” style=”height: 400px; width: 80%; margin: 10%;”></div>
  —————————

  ———–Typescript code———–
  ——-canvasjs.component.ts——-

  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();
  }
  }

  ————————————————————————————————-

  June 26, 2018 at 11:24 am #21247
  
  Vishwas R

  @sadashiv,

  The package that you are using through npm is not an official package but from a third party.

  You can download CanvasJS from our download page and save it (canvasjs.min.js) in source folder of your project (‘src/app’ or ‘src/app/assets/js’ or ‘src/app/lib’) and import the CanvasJS library 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’).

  Out library works with all versions of Angular / AngularJS. Please take a look at this gallery page for examples on integrating CanvasJS in angular apps. Also take a look at this sample project for an example on adding CanvasJS in Angular 5 App.

  

  —
  Vishwas R
  Team CanvasJS

  June 26, 2018 at 2:28 pm #21256
  
  sadashiv

  @Vishwas R

  Thanks Vishwas for your kind reply. Let me try out the way you suggested with the sample you provided. Thanks a lot!!