Chart JS Error : Uncaught TypeError: Cannot read property 'top' of undefined

Question

This is the first time I am using JS and need to use jQuery and Chart Js for plotting a time series., but I keep getting the following error:

Uncaught TypeError: Cannot read property 'top' of undefined
    at callFllSamplesApi (plot.js:105)

Code Block:

//Script included before body tag  (Chart.js 2.4, jQuery 3.4, local file plot.js with callFllSamplesApi() )

<body>
        <canvas id="line-chart" width="450" height="500"></canvas>
        <button id="btn1" onclick="callFllSamplesApi()">Generate FLL Graph</button>
 </body>

Function callFLLSamplesApi is shown below with the line that throws error.

function callFllSamplesApi() {

    var request = new XMLHttpRequest()
    request.open('GET', 'http://193.142.33.4/api/samples', true)
    request.onload = function(){
        ... Parsing code         
    }
    request.send()
    var ctx = document.getElementById("line-chart");
    var myChart = new Chart(ctx, {  <- Line 105 which throws an error
        ... More code for plotting
            }
        }
    });
}

Answer 1

You are missing getContext() on your line-chart element

var ctx = document.getElementById("line-chart").getContext('2d');

https://www.chartjs.org/docs/latest/

Chart JS Error : Uncaught TypeError: Cannot read property 'top' of undefined

Question

Code Block:

1 answers

solution1
0 2019-12-02 16:34:35

Chart JS Error : Uncaught TypeError: Cannot read property 'top' of undefined

Question

Code Block:

1 answers

solution1 0 2019-12-02 16:34:35

solution1
0 2019-12-02 16:34:35