Pie chart is not getting rendered in ChartJS

Question

While loading this chart I am getting this error:

Uncaught TypeError: n is not a function at t.render (Chart.min.js:10) at Object.callback (Chart.min.js:10) at Object.advance (Chart.min.js:10) at Object.startDigest (Chart.min.js:10) at Chart.min.js:10

<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>

<script>
    $(document).ready(function () {
        loadDonutChart();
    });

    function loadDonutChart() {
        var ctx = document.getElementById("MydonutChart").getContext("2d");
        var data = [{
            value: 30,
            color: "#F7464A"
        }, {
            value: 50,
            color: "#E2EAE9"
        }, {
            value: 100,
            color: "#D4CCC5"
        }, {
            value: 40,
            color: "#949FB1"
        }, {
            value: 120,
            color: "#4D5360"
        }];

        var options = {
            animation: true,
            animationEasing: 'easeInOutQuart',
            animationSteps: 80
        };
        var myPieChart = new Chart(ctx,
            {
                type: 'pie',
                backgroundColor: '#fcfcfc',
                data: data,
                options: options,
            });
    }
</script>

<canvas id="MydonutChart" height="700" width="100"></canvas>

Answer 1

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

Answer 2

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>