Chart destroyed, then recreated causes js type errors to appear #549

svanxxx · 2021-06-21T15:50:37Z

svanxxx
Jun 21, 2021

I have quite complicated workflow, but figured out the simpler one to repeat the same issue:
Having simple simple page, i need to re-create the chart with different settings... zooming in the chart gives a bunch of errors once i try to zoom in or zoom out:
chartjs-plugin-zoom.min.js:7 Uncaught TypeError: Cannot read property 'zoom' of undefined

I may be the issue of the plugin itself or i use it in some wrong way?
Here is the code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.0.1/chartjs-plugin-zoom.min.js"></script>
</head>

<body>
    <div>
        <canvas id="myChartID"></canvas>
    </div>
    <script>
        window.addEventListener('DOMContentLoaded', (event) => {
            document.config = function () {
                return {
                    type: 'line',
                    data: {
                        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                        datasets: [{
                            label: 'My First Dataset',
                            data: [65, 59, 80, 81, 56, 55, 40],
                            fill: false,
                            borderColor: 'rgb(75, 192, 192)',
                            tension: 0.1
                        }]
                    },
                    options: {
                        plugins: {
                            title: {
                                display: true,
                                text: ""
                            },
                            zoom: {
                                pan: {
                                    enabled: true,
                                    mode: 'x'
                                },
                                zoom: {
                                    wheel: {
                                        enabled: true,
                                    },
                                    pinch: {
                                        enabled: true
                                    },
                                    mode: 'x',
                                },
                            }
                        },
                    }
                }
            };
            document.newChart = function (id) {
                document[id] = new Chart(
                    document.getElementById(id),
                    document.config()
                );
            };
            document.delChart = function (id) {
                document[id].destroy();
                document[id] = undefined;
            };
            document.newChart("myChartID");
            setTimeout(() => {
                document.delChart("myChartID");
                document.newChart("myChartID");
            }, 1000);
        });
    </script>
</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chart destroyed, then recreated causes js type errors to appear #549

{{title}}

Replies: 0 comments

Select a reply

Chart destroyed, then recreated causes js type errors to appear #549

svanxxx Jun 21, 2021

Replies: 0 comments

svanxxx
Jun 21, 2021