chartjs + Angular6 is not showing charts or any er

问题:

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

回答1:

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.