I can’t do doughnut and chartjs pie!

Question

So I’m using the chartjs on a system here, but the pie and donut style does not display on the system. I imported the cdns:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>

And I made a file Graph.js to put the chatjs code and import it in my head:

<code>var ctx = document.getElementById("ChartDonut");
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Pagos","Pendentes"],
        datasets: [{     
            data: [200, 137],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)'   
            ]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});</code>

In my html I call CANVAS normally:

<canvas id="chartDonut"></canvas>

But neither DOUGHNUT nor PIE work. Someone knows the pq?

Answer 1

You have two problems in your code.

The first is that the id of canvas is chartDonut and in your script you are using Chartdonut.

The second are yours options. See the list of what you can use. for this type of chart.

See below for an example of your corrected code:

var ctx = document.getElementById("chartDonut");
var myDoughnutChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Pagos", "Pendentes"],
    datasets: [{
      data: [200, 137],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)'
      ]
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="chartDonut"></canvas>

Reading tips:

• There are objective advantages to a language being "case sensitive" or not?
• Documentation Chart.js