Monthly Expense (pie chart Angular5) npm install canvasjs

[sonamallied]

i am using the pie chart which is throwing me some error WRT Chart
( npm install canvasjs ) ran this as well
1.Cannot read property ‘Chart’ of undefined
2.Cannot read property ‘render’ of undefined
HTML
<div id=”chartContainer” style=”height: 370px; width: 100%; margin-left:auto;margin-right:auto;”></div>
Angular
ngOnInit() {

this.debugger
let chart = new this.CanvasJS.Chart(“chartContainer”, {
theme: “light2”,
animationEnabled: true,
exportEnabled: true,
title:{
text: “Monthly Expense”
},
data: [{
type: “pie”,
showInLegend: true,
toolTipContent: “<b>{name}</b>: ${y} (#percent%)”,
indexLabel: “{name} – #percent%”,
dataPoints: [
{ y: 450, name: “Food” },
{ y: 120, name: “Insurance” },
{ y: 300, name: “Traveling” },
{ y: 800, name: “Housing” },
{ y: 150, name: “Education” },
{ y: 150, name: “Shopping”},
{ y: 250, name: “Others” }
]
}]

});
this.chart.render();

console.log(chart.data)
}
please help me .

Thanks,
Sonam

[Vishwas R]

@sonamallied,

We don’t have official NPM package as of now. However, CanvasJS Chart works fine with all versions of Angular / AngularJS including Angular 5. Below are the steps to integrate CanvasJS Chart / StockChart in your angular app.
1. Save canvasjs.min.js (canvasjs.stock.min.js incase of StockChart) within source-folder of your Angular application ( src or src/assets or src/lib )
2. Import the library into your app.
For Chart: import * as CanvasJS from './canvasjs.min';
For StockChart: import * as CanvasJS from './canvasjs.stock.min';

Once it’s imported, you are ready to go. Now you can create Chart / StockChart, pass options & render them.

Please check out Angular Gallery for examples on integrating charts in Angular app.

—
Vishwas R
Team CanvasJS