javascript - Plotly.js multiple subplots not working as expected

Question

Edit to add: Looking for the "plotly.js" way to do this. This "small multiple" visualization should have some "plotly.js" solution out there but haven't found it yet.

I am using an array (example element below) to populate traces for plotly.js multiple subplots per their multiple-subplots example

[{
    "key": "Ontario|Toronto",
    "values": [{
        "key": "2020-01-25",
        "value": 1
    }, {
        "key": "2020-01-27",
        "value": 1
    }, {
        "key": "2020-05-12",
        "value": 218
    }, {
        "key": "2020-05-13",
        "value": 169
    }]
}, { 
    etc
}]

The array has 94 elements which contain info needed to create each trace. This would result in 94 subplots, one per trace. This plotly.js visualization could also be called "small multiples".

I am creating the traces dynamically and populating subplot definitions in a loop using code below:

// create chart data
var traces = [];
var rowCount = (caseRegionByDate.length / 2).toFixed()

for (var i=0; i<caseRegionByDate.length; i++) {
    //console.log(caseRegionByDate[i]['key']);
    var trace = {};
    var x = [];
    var y = [];
    for (var j=0; j<caseRegionByDate[i]['values'].length; j++) {
        //console.log(caseRegionByDate[i]['values'][j]['key']);
        x.push(caseRegionByDate[i]['values'][j]['key']);
        y.push(caseRegionByDate[i]['values'][j]['value']);
    }
    // create trace i
    trace = {
    "x":x,
    "y":y,
    "xaxis":"x"+i,
    "yaxis":"y"+i,
    "type":"scatter"
    }
    // push trace to traces
    traces.push(trace);
}
console.log(JSON.stringify(traces));

var layout = {
    grid: {rows: rowCount, columns: 2, pattern: 'independent'},
    };

Plotly.newPlot('multiple_charts', traces, layout);

This creates the traces variable populated by each trace that looks like example below. It looks correct:

[{
    "x": ["2020-03-16", "2020-03-23", "2020-03-24", "2020-03-25", "2020-03-31", "2020-04-01", "2020-04-02", "2020-04-03", "2020-04-06", "2020-04-07", "2020-04-08", "2020-04-09", "2020-04-10", "2020-04-11", "2020-04-13", "2020-04-14", "2020-04-15", "2020-04-16", "2020-04-17", "2020-04-18", "2020-04-21", "2020-04-22", "2020-04-23", "2020-04-24", "2020-04-25", "2020-04-26", "2020-04-27", "2020-04-28", "2020-04-29", "2020-04-30", "2020-05-01", "2020-05-02", "2020-05-03", "2020-05-04", "2020-05-05", "2020-05-06", "2020-05-07", "2020-05-08", "2020-05-09", "2020-05-10", "2020-05-11", "2020-05-12", "2020-05-13"],
    "y": [1, 1, 1, 1, 9, 35, 3, 16, 33, 13, 9, 5, 5, 1, 22, 3, 4, 7, 19, 4, 7, 2, 18, 11, 9, 9, 9, 13, 1, 3, 7, 18, 5, 4, 4, 5, 3, 1, 2, 2, 3, 1, 2],
    "xaxis": "x0",
    "yaxis": "y0",
    "type": "scatter"
}, {
    "x": ["2020-03-14", "2020-03-26", "2020-03-27", "2020-04-02", "2020-04-06", "2020-04-09", "2020-04-14", "2020-04-17", "2020-04-18", "2020-04-20", "2020-04-22"],
    "y": [1, 1, 1, 2, 2, 3, 1, 1, 1, 2, 1],
    "xaxis": "x1",
    "yaxis": "y1",
    "type": "scatter"
},
    etc
]

However, the result appears to be one row with two columns that have all of the traces (there are 94 traces) squashed into them. Here is screenshot.

Any ideas what is happening? I expect to have 48 rows with 2 columns, one subplot per trace.

The only difference from the multiple subplots example is that my xaxis have date strings instead of numbers. Everything else is same.

标签： javascriptplotly.js

Answer 1

The subplots are actually being created in 3 x rowCount grid. However they are all squashed vertically as in screenshot.

It appears that a chart's default height and width dimensions, where they are not explicitly defined using layout.height, are what is shown in my screenshot eg too small for 94 subplots.

The quick fix is to simply increase the chart's layout.height size. Then all subplots are visible. Dynamically calculating layout.height, in spirit of Juan's suggestion, relative to number of rows works well.

Apparently it is also possible to set each subplot's x and y domain attributes to resize subplots which will also give desired results.