CODEWITHSUNDEEP
javascripthtmlcanvaschartschart.js
AttackTheWar
AttackTheWar

Reputation: 219

Display Chart(.js) when mouse hover over: TypeError: t is null

I came across a error that I cant seem to be fixing.

I'm trying to display a chart (Chart.js) when my mouse is hoverd over the canvas. When hovering my mouse over the canvas i receive a TypeError: t is null error.

Error: { "message": "Script error.", "filename": "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js", "lineno": 0, "colno": 0 }

The error is not from my own code but from chart.js.

The code I used can be found below.

<!doctype html>
<html>
<head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<style>
    #canvas{border:1px solid lightgray;}
</style>
</head>
<body>
<script>
window.onload=function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

        //Mouse over
        canvas.addEventListener("mouseover",function(){
            draw(ctx);
            console.log("mosue hover")

            //Show chart
            new Chart(document.getElementById("line-chart"), {
                type: 'line',
                data: {
                    //x
                    labels: [1571677338438,
                        1571680924962,
                        1571684668435],
                    datasets: [{
                        data: [8179.6471707218025,
                            8194.415903357343,
                            8175.8698340503815],
                        borderColor: "#3e95cd",
                        fill: true
                    }
                    ]
                },
                options: {
                    title: {
                        display: false,
                        text: 'World population per region (in millions)'
                    },
                    legend: {
                        display: false,
                    }
                }
            });


        });


        //Mouse over ends
        canvas.addEventListener("mouseout",function(){
            draw(ctx);
            console.log("end hover");
            console.log("remove chart.");
        });


        draw(ctx);

    function draw(ctx){
        ctx.beginPath();
        ctx.closePath();
    }

};  // end window.onload

</script>

    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Upvotes: 0

Views: 914

Answers (1)

Alan Omar
Alan Omar

Reputation: 4217

You are selecting unexciting element line-chart when i change it to canvas the chart showed up.it should be: 

//Show chart
new Chart(document.getElementById("canvas"), {
        type: 'line',
        data: {
        .
        .

Upvotes: 0

Related Questions