Angular Pie Chart

To start implementing, visit the below link: 

https://www.npmjs.com/package/ng2-charts/v/3.0.0-rc.2

and follow the instructions it mentions, going with the flow I will show you how it impacts your projects File structure:

You can install ng2-charts using npm

npm install ng2-charts@next --save

Effect: Two folders gets added to node_modules

You need to install and include Chart.js library in your application (it is a peer dependency of this library) (more info can be found in the official chart.js documentation)

npm install chart.js --save

API Import

import { ChartsModule } from 'ng2-charts';

// In your App's module:

imports: [

   ChartsModule

]

Chart types

There is one directive for all chart types: baseChart, and there are 8 types of charts: line, bar, radar, pie, polarArea, doughnut, bubble and scatter.

 

Schematics

There are schematics that may be used to generate chart components using Angular CLI. The components are defined in package ng2-charts-schematics.

Installation of Schematics Package

npm install --save-dev ng2-charts-schematics

Example of Generating a Line Chart using Angular CLI

ng generate ng2-charts-schematics:line my-line-chart

This calls angular's component schematics and then modifies the result, so all the options for the component schematic are also usable here. This schematics will also add the ChartsModule as an imported module in the main app module (or another module as specified in the --module command switch).

But it throws this error:

Solution:

Make sure you keep this configuration in package.json file

ng2-charts@3.0.0-rc.7

"chart.js": "^3.4.0",

"rxjs": "^6.3.3"

"chartjs-plugin-annotation": "^1.4.0"

How to figure out what's the right choice for your project.

Identify the library that may be dependent on other libraries. In this case, ng2-charts is the wrapper class internaly using chart.js and others.

This you should get to know as you start installing by looking inside library's package.json file of your project's node_modules folder.

1.  

2. Scroll down to the section where it shows peerDependencies

3. make sure you use the SAME version of it as shown above.

4. Make sure to delete node_modules and package-lock.json before npm i.

Suggestions:

If my content helps you in any way, please do let me know, and feel free to share it on your technical pages to share the solution to others in need. Annnddd, in case you have a better plan, please open up :).

Reference:

• https://valor-software.com/ng2-charts/#BarChart
• https://github.com/valor-software/ng2-charts/issues/1459
• https://stackoverflow.com/questions/73103388/ng0303-cant-bind-to-type-since-it-isnt-a-known-property-of-canvas
• https://www.npmjs.com/package/ng2-charts/v/3.0.0-rc.2
• https://www.tutsmake.com/angular-11-pie-chart-tutorial-with-ng2-charts-example/ 
• https://www.freakyjolly.com/angular-chart-js-tutorial-using-ng2-charts-with-examples/