Chart.js - (intermediate value).Doughnut is not a function

Question

I am trying to generate a Doughnut chart using Chart Js Library and it turns out to be throwing an error Uncaught TypeError: (intermediate value).Doughnut is not a function. I double checked the js files linking , everything looks fine. Did anyone face this issue earlier?

Here is my code:

function getPieChart(pAmt, iAmt, pFee) {


//pie chart code starts here


var data = [
    {
        value: pAmt,
        color: "#F7464A",
        highlight: "#FF5A5E",
        label: "Principal Amount"
    }, {
        value: iAmt,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Interest Amount"
    }, {
        value: pFee,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Processing Fee"
    }];

var options = {
    segmentShowStroke: true,
    animateRotate: true,
    animateScale: false,
    percentageInnerCutout: 50,
    segmentStrokeColor: "#fff",
    tooltipTemplate: "<%= label%>: Rs.<%= converter(value) %>",
    segmentStrokeWidth: 2,
    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><div class=\"col-md-12\"><div class=\"emicleft col-md-6\"><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%=segments[i].label%></div><div class=\"emicright col-md-6\"><i class=\"fa fa-inr\"></i> <span class=\"emicrightspan\"><%=converter(segments[i].value)%></span></div></div></li><%}%></ul>"
};
var ctx = document.getElementById("emichart").getContext("2d");
var myChart = new Chart(ctx).Doughnut(data, options);
document.getElementById('js-legend').innerHTML = myChart.generateLegend();
}

Answer 1

If you have switched to chart.js v2, this error will occur since there is a new syntax.

Here is a link to the issue and here is a link to the new syntax.

Here is an example:

var config = {
    type: 'pie',
    data: {
        datasets: [{
            data: [
                pAmt,
                iAmt,
                pFee
            ],
            backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C"
            ],
        }],
        labels: [
            "Principal Amount",
            "Interest Amount",
            "Processing Fee"
        ]
    },
    options: {
        responsive: true
    }
};

window.onload = function() {
    var ctx = document.getElementById("emichart").getContext("2d");
    window.myPie = new Chart(ctx, config);
};