Chart.js: Cannot read property 'parentNode' of null

[The8Monkey]

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

[etimberg]

@The8Monkey any reason you are destroying the charts and creating them again instead of just changing the chart data and calling chart.update()?

[The8Monkey]

When i use chart.update() i don't get a error anymore.

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

[kyr0]

Well, this also happens when using Chart.js in Ionic (mobile apps) using ng2-charts (https://github.com/valor-software/ng2-charts) since Ionic automatically destroys the view on hide/page switch etc... (e.g. a SegmentButton using ngSwitch will destory the DOM node a chart refers to when the user switches A/B)

Edit: In my specific case I was able to fix it by using "display: none" instead of destroying. But it would be awesome if you could just add the missing if (parentNode) statement to prevent the null access from happening. If a DOM node that is the rendering context of a view (the chart in this case) is not existing anymore, the chart instance (JS object, event listeners etc.) can be GC'ed. There should be no exception been thrown when there is no DOM node to display it anymore. Just because when there is no DOM node to display the chart, there is no reasoning for the state object to exist anyway. Just my 2 cents.

[simonbrunel]

Might have been fixed by #4591: you can try the latest development build to confirm. Though, the chart JavaScript instance keeps a reference on the canvas, so even if the node is removed from the DOM, I doubt it will be GC'ed until you also destroy the chart object as well (chart.destroy()).

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

[Diptyajit1994]

How can i update the chart without pushing the data again?
Getting the error Cannot read property 'parentNode' of null