I want to create four bar charts for my three ml models. The front-end receives a data that contains value of four different evaluation metrics for the three models. However, the chart that is showing in the front-end is not working correctly.

Here is the code in JS:

    let len_ = js_vars.selected_ems.length;
    var data = [];
    for (let i = 0; i < js_vars.selected_ems.length; i++) {

        var trace = {
            x: js_vars.models_name,
            y: js_vars.em_vals[i],
            type: 'bar',
            name: js_vars.selected_ems
        };
        data.push(trace)
    }
    console.log(data)


    var layout = {
    grid: {rows:len_, columns: 1,barmode: 'stack',},
    };

    Plotly.newPlot('myDiv', data, layout);

And here is the data that has been logged in the console:

But the problem is instead of showing a subplot with 4 rows (different evaluation metrics) and 3 models, it combines all of them into one chart.

How can I solve this?