Chartjs-How to make a chart with chartjs and Angular?

by

0👍

✅

I think ng2-charts might not play well with chart.js version 3.0.0+, try to install an older version:
npm install chart.js@2.9.4 --save.

Also, I’m not sure if your html has the baseChart directive added (because the picture is cut with the error), it should look something like:

<canvas 
  baseChart 
  [datasets]="barChartData" 
  [labels]="barChartLabels" 
  [options]="barChartOptions"
  [legend]="barChartLegend" 
  [chartType]="barChartType">
</canvas>

Finally, here is a minimal example of adding chart.js to your application – stackblitz

0👍

You cant just bind your data to a canvas and think it will work, you will either have to use the bare lib correctly because im pretty sure chart.js doesnt expose an export called ChartDatasetsee integration (https://www.chartjs.org/docs/latest/getting-started/integration.html) and usage (https://www.chartjs.org/docs/latest/getting-started/usage.html) guides to get started.

Alternatively you can use the angular wrapper which is just a component where you can just supply your data to (https://valor-software.com/ng2-charts/).

0👍

npm install ng2-charts

when we want to install this above command just write –force
npm install ng2-charts --force in angular 13 command prompt
go to package.json my version number is = "ng2-charts": "^2.4.3",

Leave a comment