score:3

Accepted answer

This is because, the way you are constructing the chart is incorrect (it's for Chart.js 1.x).

Here is the correct / proper way of creating a chart in Chart.js 2.x :

$(document).ready(function() {
   loadDonutChart();
});

function loadDonutChart() {
   var ctx = document.getElementById("MydonutChart").getContext("2d");

   var data = {
      datasets: [{
         data: [30, 50, 100, 40, 120],
         backgroundColor: ["#F7464A", "#E2EAE9", "#D4CCC5", "#949FB1", "#4D5360"]
      }]
   };
   var options = {
      animation: {
         easing: 'easeInOutQuart',
         duration: 1000
      }
   };

   var myPieChart = new Chart(ctx, {
      type: 'pie',
      data: data,
      options: options
   });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="MydonutChart"></canvas>

score:0

First of all, your data-variable is wrong. In the docs I've not found any info that you could use an array of objects. Data has to be an Object!

This is yours, it's wrong: 

var data = [{
            value: 30,
            color: "#F7464A"
        }, {
            value: 50,
            color: "#E2EAE9"
        }, {
            value: 100,
            color: "#D4CCC5"
        }, {
            value: 40,
            color: "#949FB1"
        }, {
            value: 120,
            color: "#4D5360"
        }];

Maybe have a look at this example: http://www.chartjs.org/docs/latest/getting-started/usage.html


Related Query

More Query from same tag