Home forums Using CanvasJS Canvas JS issue with Angular5 for ColumnChart and StackedColumnChart

This topic contains 2 replies, has 2 voices, and was last updated by  sadashiv 2 weeks, 6 days ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #21245

    sadashiv
    Member

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

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

    #21247

    Vishwas R
    Keymaster

    @sadashiv,

    The package that you are using through npm is not an official package but from a third party. We don’t have official npm package published as of now.

    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’).

    Please refer this sample project for adding CanvasJS in Angular 5 App.


    Vishwas R
    Team CanvasJS

    #21256

    sadashiv
    Member

    @vishwas R

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.