[Chartjs]-Chartjs + Angular6 is not showing charts or any error

by

18👍

✅

Code in component is correct, issue was in html
wrapping the <canvas> tag inside <div> has solved the issue as said in comment by @Quan Vo

Example:

<div><canvas id="canvas"></canvas></div>

Why <canvas> tag should be inside <div> tag, for this one can refer this article

In Short:

The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript. In order to leverage the HTML5 Canvas, we’ll need to place the canvas tag somewhere inside the HTML document, access the canvas tag with JavaScript, create a context, and then utilize the HTML5 Canvas API to draw visualizations.

0👍

I was also having this problem and what was wrong was just the import, I was using "import { Chart } from "chart.js" " and I saw another way to import and that in my case solved it. It was like this, "import Chart from ‘chart.js/auto’. If I wanted to know more about it, I saw this solution in this link: https://www.angularfix.com/2021/10/chart-js-graph-not-showing-on-canvas.html

Leave a comment