Chartjs-Chartjs – destroy() does nothing

by

3👍

Even I had the same issue earlier. I simply added a condition to check the chart variable is empty or not.

if(chartID != null){
   chartID.destroy();
}

Include this at the top of the function. It’ll work fine as you are declaring chartID globally. This way you don’t need to redeclare the chart again.

0👍

Try this:

const chartCanvas = document.getElementById('myChart');

            if( window.lineChart != undefined){
                window.lineChart.destroy();
            }
            window.lineChart = new Chart(chartCanvas,{
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    datasets: [
                        {
                            label: 'Cases',
                            data: [23,42,22,45,56,77,33,22,46,77,32,44],
                            fill: false,
                          //  backgroundColor: 'red',
                            borderColor: ['rgb(255, 255, 0)'],
                            lineTension: 0.2,
                            borderWidth: 1.5
                        }
                    ]
                },
                options:{
                    title: {
                        display: true,
                        text: "Temperature variation",
                        fontFamily: 'Arial',
                        fontSize: 16
                    },
                    legend: {
                        display: true,
                        position: "right",
                        labels: {
                            boxWidth:10
                        }
                    },
                    //stacked - start with 0 as minimum value for y-axis
                    scales:{
                        yAxes: [{
                            stacked: true,
                            gridLines:{
                                display: true,
                                color: '#FFFFFF',
                                lineWidth: 1,
                                zeroLineColor: 'blue',
                                zeroLineWidth: 2,
                                drawBorder: false // this to remove the ghost line that appears
                                                  // when you add zeroLine x-axis
                            }

                        }],
                        xAxes: [{             
                           gridLines:{
                                display: true,
                                zeroLineColor: 'blue',
                                zeroLineWidth: 1,
                                color: 'transparent'
                            }
                        }]
                    }

                }
            });

—————– Added code sample above ——————

I had some issues with ChartJs. Somehow, it created a new chart with the previous chart still in the canvas which shows up when you hover.

This worked for me:

if( window.chartID!= undefined){
                window.chartID.destroy();
            }

chartID = new Chart(ctx, {...});

0👍

I am creating multiple charts on click.
but before creating chart I just destroy any previous charts
so , thats how it looks

    var chartStatus
    // on one onclick
    if (chartStatus) {    chartStatus.destroy();  }
    chartStatus = new Chart(document.getElementById("co2Chart"), co2Config);
    // on another onclick    
    if (chartStatus) {    chartStatus.destroy();  }
    chartStatus = new Chart(document.getElementById("tempChart"), tempConfig);

Leave a comment