-1

I am able to display a line graph and a bar chart. But for some reason I am not able to display a pie chart or a doughnut chart. I have gone through various tutorials and tried various things. I cannot figure this out!

Here is my code:

html

<div>
  <canvas #theDonutCanvas></canvas>
</div>

ts

@ViewChild('theDonutCanvas') private donutCanvas: ElementRef;
  donutChart: any;

doTheDonut() {
    this.donutChart = new Chart(this.donutCanvas.nativeElement, {
      type: 'doughnut',
      data: {
        labels: ['Solicitado', 'Entregado', 'Faltante'],
        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
          }]
        }
      }

    });
  }
ngAfterViewInit(): void {
        this.doTheDonut();
      }

The error: ERROR TypeError: Cannot read property 'nativeElement' of undefined

codesandbox.io/s/confident-butterfly-3jwn1?file=/src/app/…

Ree
  • 863
  • 2
  • 18
  • 38
  • Works fine for me. – pzaenger Jun 08 '21 at 16:33
  • You would want to set the scales displays to false but other then that this just works: https://jsfiddle.net/Leelenaleee/sdu5yzwj/ – LeeLenalee Jun 08 '21 at 17:01
  • Helpful yet not helpful. I shall struggle forth. Thank you. – Ree Jun 08 '21 at 17:06
  • If you can provide a reproducable sample people would be able to give some helpfull info , you can use https://codesandbox.io/ for angular projects – LeeLenalee Jun 08 '21 at 17:41
  • I think my problem may have more to do with having multiple charts in one component. I got my doughnut to work and added it. Then my bar chart stopped working. I got that to work separately and added it. Now no chart displays - not even the line charts! All I am doing is literally copy-paste and suddenly things appear or disappear. Makes no sense. – Ree Jun 08 '21 at 22:07
  • I can't seem to create a sandbox. It won't load... – Ree Jun 08 '21 at 22:13
  • I've found a clue. ERROR TypeError: Cannot read property 'nativeElement' of undefined. – Ree Jun 08 '21 at 22:29
  • And here's a sandbox: https://codesandbox.io/s/confident-butterfly-3jwn1?file=/src/app/app.component.ts – Ree Jun 08 '21 at 22:29

1 Answers1

0

First make sure to register the controllers, elements, scales etc. you're going to use.

Beside that, make sure, that every @ViewChild definition points to an existing canvas in your HTML template. Check that the template variables are correctly referenced.

Please take a look at your amended CodeSandbox

uminder
  • 23,831
  • 5
  • 37
  • 72
  • I tried using your sandbox code n my project but found not a single chart appeared. it's not so much about the doughnuts chart as it is about the means with which the charts are displayed I guess. I would like to get this method working. – Ree Jun 16 '21 at 22:06