Search code examples
javascriptplotlyplotly.js

Plotly Multiple Scatter Plots - Rendering Problem

I'm trying to plot 10+ scatter plots on one page using Plotly. However, I've noticed that if more than 8 plots are created, some of the plots show a square with a frowny face. I've read that this means Chrome failed to render the chart.

It does not matter how complex the chart is. Even 9 basic charts will cause one not to render. See below for example with code to replicate the issue:

https://codepen.io/ceds/pen/wvrGoLa

HTML

<div id="graphDiv1"></div>
<div id="graphDiv2"></div>
<div id="graphDiv3"></div>
<div id="graphDiv4"></div>
<div id="graphDiv5"></div>
<div id="graphDiv6"></div>
<div id="graphDiv7"></div>
<div id="graphDiv8"></div>
<div id="graphDiv9"></div>
<div id="graphDiv10"></div>
<div id="graphDiv11"></div>
<div id="graphDiv12"></div>
<div id="graphDiv13"></div>

JS

for (let i = 1;i < 13;i++) {
    
    var trace1 = {
        x: [1, 2, 3, 4],
        y: [4, 1, 5, 3],
        mode: 'markers',
        type: 'scattergl',
        marker:{
            size: [30, 80, 50, 80],
            color: 'blue'
        },
        name: 'Third Trace'
    };

    var data = [trace1];

    var layout = {
        title: `Chart ${i}`
    };

    var graphDiv = document.getElementById('graphDiv' + i.toString());

    Plotly.newPlot(graphDiv, data, layout);

}

Any idea how to get past this ?

Solution

  • Seems like there is a Github issue open on this. The issue is not resolved as it's a limitation of Chrome:

    https://github.com/plotly/plotly.js/issues/2333