chartjs + Angular6 is not showing charts or any error

user_4278220 0
Viewed 4727

I m trying to implement chart.js in angular, have written a simple code to display chart on html, but there is not output on the page, also there are no errors. I m not getting where is the issue and why displaying chart is getting failed. slackblitz url for reference

Code that I m trying in component:

this.chart1 = new Chart('canvas', {
      type: 'doughnut',
      data: {
        labels: ['solid', 'liquid', 'unknown'],
        datasets: [
          {
            label: 'test',
            data: [
              100, 200, 300
            ],
            backgroundColor: ['#0074D9', '#2ECC40', '#FF4136']
          }
        ]
      },
      options: {
        title: {
          display: false,
          text: 'Color test'
        },
        legend: {
          position: 'left',
          display: true,
          fullWidth: true,
          labels: {
            fontSize: 11
          }
        },
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{
            display: true
          }]
        }
      }
    });

Please help me to understand where I m getting failed, Thanks

chart.js angular canvas
2 Answers

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.

user_42782200

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

user_155335820
Related