Cannot read property 'parentNode' of null

Hello,

i using the following js to create 2 bar charts and destroy and rebuild them when in change a a value via dropdown menu.

document.onload = createCharts();
var dia1;
var dia2;
var chart1;
var chart2;


function createCharts(){
    chart1 = document.getElementById("myChart").getContext('2d');
    chart2 = document.getElementById("my2ndChart").getContext('2d');
    dia1 = createChart(stimmen, chart1, 10);
    dia2 = createChart(verluste, chart2, 5);
}

function updateCharts(){
    dia1.destroy();
    dia2.destroy();
    chart1 = document.getElementById("myChart").getContext('2d');
    chart2 = document.getElementById("my2ndChart").getContext('2d');
    dia1 = createChart(stimmen, chart1, 10);
    dia2 = createChart(verluste, chart2, 5);
}

function getData(array){
    var wert = document.getElementById("land").value;
    var data = {
        labels: ["Die Linke", "SPD", "CDU", "FDP", "Grüne / B90", "Sonstige"],
        datasets: [{
            backgroundColor: [
                'rgba(165, 10, 110, 1)',
                'rgba(204, 0, 0, 1)',
                'rgba(5, 35, 120, 1)',
                'rgba(255, 215, 0, 1)',
                'rgba(35, 140, 35, 1)',
                'rgba(135, 135, 135, 1)'
            ],
            borderWidth: 1,
            data: [array[wert][1],array[wert][2],array[wert][3],array[wert][4],array[wert][5],array[wert][6]]
        }]
    };
    return data;
}

function getChart(chartPosition, myStepSize, chartData){
    var chart = new Chart(chartPosition, {
        type: 'horizontalBar',
        data: chartData,
        options: {
            responsive: true,
            legend: {
                display: false
            },
            scales:{
                xAxes: [{
                    ticks: {
                        beginAtZero: true,
                        fixedStepSize: myStepSize,
                        callback: function(value, index, values) {return value + ' %';},
                        fontSize: 20,
                        fontFamily: "Arial",
                        fontColor: "#000"
                    }
                }],
                yAxes: [{
                    ticks: {
                        fontSize: 20,
                        fontFamily: "Arial",
                        fontColor: "#000"
                    }
                }]
            },
            tooltips: {
               	callbacks: {
                    label: function(tooltipItem, data) {return tooltipItem.xLabel + ' %';}
                }
            }
        }
    });
    return chart;
}
function createChart(array, chartPosition, myStepSize){
    return getChart(chartPosition, myStepSize, getData(array));
}

when i call my updateCharts i get the error

Uncaught TypeError: Cannot read property ‘parentNode’ of null -at Object.o.getMaximumWidth (Chart.min.js:12) -at t.Controller.resize (Chart.min.js:11) -at a (Chart.min.js:12) -at Chart.min.js:14 o.getMaximumWidth @ Chart.min.js:12 resize @ Chart.min.js:11 a @ Chart.min.js:12 (anonymous) @ Chart.min.js:14

The charts a working fine so far but i still get the error. At some point he was not able to resize the first chart(dia1). Dose anyone know a solution for this?

Regards Monkey

[3stacks]

Rather than opening a new I thought I’d jump onto this one.

I’m getting Uncaught TypeError: Cannot read property 'parentNode' of null when I run destroy().

I’m using update in other places, but I do often remove the charts from the screen (which does require use of .destroy()).

Any ideas?

[jgorene]

Hello, First, best thanks all the team and contributors about this useful and awesome library.

Indeed with the version 2.7 as suggested by @simonbrunel and since I’m using it, I did not still encountered the message error (in subject) until now… I’m using also chart as like describes here with chart.update() and chart.destroy() for some reasons particulary with a “bootstrap modal dialog” open by click from a html table… All works like a charm for now…

Thanks again !