Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Line Chart has memory leak

See original GitHub issue

I ran into the same problem as other users where the line chart’s memory was not being released after calling destroy(). I took the sample line chart code to illustrate this. Simply call LoopIt() and watch the memory usage increase.

<!doctype html>

<html> <head> <title>Line Chart</title> <script src="../Chart.js"></script> </head> <body> <div style="width:30%"> <div> <canvas id="canvas" height="450" width="600"></canvas> </div> </div>

<script>
    var randomScalingFactor = function(){ return 5};
    var lineChartData = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
            {
                label: "My First dataset",
                fillColor : "rgba(220,220,220,0.2)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(220,220,220,1)",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            },
            {
                label: "My Second dataset",
                fillColor : "rgba(151,187,205,0.2)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            }
        ]

    }

function Reload(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
}

function LoopIt(){
    if(!window.myLine)
        Reload();


    for(var i = 0; i < 100; i++)
    {  
        myLine.destroy();
        Reload();
    }
}


</script>
</body>

</html>