score:5

Accepted answer

because you are not destroying the instances of chart that you are no longer using, chartjs is drawing multiple charts into the same canvas context.

you need to have a reference of the chart instances you new up to be able to call destroy on them before you new up another one.

add this to your code:

var ctx = document.getelementbyid("mychart").getcontext("2d");
    ctx.canvas.width = 600;
    ctx.canvas.height = 200;

var chart; // assign your chart reference to this variable

function updatechart() {
    var determinechart = $("#charttype").val();

    var params = datamapmain[determinechart];
    if ([params.method] == "pie") {
        document.getelementbyid("suboption").hidden = false;
        document.getelementbyid("arrowid").hidden = false;

var determinechart = $("#suboption").val();
        var params = datamapsub[determinechart];
        $('#suboption').on('change', updatechart);

        chart && chart.destroy(); // destroy previous chart
        chart = new chart(ctx)[params.method](params.data, options, {});

    }
    else {
        document.getelementbyid("suboption").hidden = true;
        document.getelementbyid("arrowid").hidden = true;

        chart && chart.destroy(); // destroy previous chart
        chart = new chart(ctx)[params.method](params.data, options, {});
    }
}

$('#charttype').on('change', updatechart)
updatechart();

and here is a fiddle that demonstrates the fix.


Related Query

More Query from same tag