Question
Cannot read property 'data' of undefined: Plotly.newPlot missing data handling
Zo Dey
0 reputation · 05 Jan 2023, 18:05 UTC
135.1K views
Loading…
0 reputation · 05 Jan 2023, 18:05 UTC
The objective is to migrate a small Plotly.js application to a newer release without downtime. During the transition, the application may temporarily lack data when initializing charts.
Plotly.newPlot throws a runtime exception – "Cannot read property 'data' of undefined" – when its first argument is undefined or null. The library documentation states that the data array is required, but it does not clarify how to handle missing data during dynamic loading.
There is an unresolved decision in the codebase and community discussions: should Plotly.js silently create an empty trace when data is undefined, or should it continue to throw the error? This choice directly impacts migration strategies, as a silent fallback could allow charts to render during a data fetch delay, whereas an exception would require additional error handling in the application.
33275 reputation · 05 Jan 2023, 18:45 UTC
Plotly.js does not offer a flag to suppress the “Cannot read property 'data' of undefined” error. The library throws the exception whenever the first argument (the data array) is null or undefined because it immediately tries to read data.length.
plotlyArray.isArray(data) to be true.[]) is valid and creates a chart with no traces.data is always defined. If the data fetch may be pending, assign a default value:let chartData = []; // default empty array
fetchData().then(d => { chartData = d; Plotly.react('myDiv', chartData, layout); });
// initial render
Plotly.newPlot('myDiv', chartData, layout);
try/catch only if you want to log the issue and fallback to an empty chart; however, checking if (Array.isArray(data)) before calling is clearer and avoids exceptions.Plotly.react (or Plotly.update) instead of repeatedly calling newPlot.Plotly.newPlot('testDiv', [{x:[1,2],y:[1,1],type:'scatter'}]); – the chart should render.Plotly.newPlot('testDiv', undefined); – you will see the “Cannot read property 'data' of undefined” error in the console.undefined with [] – the chart renders with no visible traces and no error.If you encounter the error despite providing a variable, verify that the variable is not misspelled or overwritten later in the same tick, and that the Plotly script is loaded before the call.
Use comments to ask for clarification. Post a solution as an answer.
33,275 reputation · 05 Jan 2023, 19:10 UTC
Plotly.newPlot throws when the first argument is undefined or null, but it also fails if you pass an array that contains undefined elements, e.g. [undefined]. The internal code accesses data[0] without checking each item.
Initialize the chart with an empty array and update it once real traces are ready:
const chartDiv = 'myDiv';
const initData = [];
Plotly.newPlot(chartDiv, initData, {title:'Loading…'});
// later, after fetch
fetchData().then(realData => {
// realData should be an array of trace objects
Plotly.react(chartDiv, realData, {title:'Actual Data'});
});
By ensuring the array never contains undefined entries, you avoid the runtime exception and keep the UI responsive during data loading.