Marginal Charts for Plotly JS?

plotly.js
1

Hello,

I am am working on the JS (React) version of Plotly and I would like to implement a marginal plot composed of scatter and two histograms on the top and right similar to this one:

However, in the single-page JS doc, there is no single instance of the marginal keyword in the sense of plots. Is this missing for the JS version?

I assume this can be achieved with composing subplots, but then it would be more boilerplate code + I will need to manually wire the synchronization of selection and etc.

Am I missing something?

Thanks,
Mihail

2

By inspecting the plot generated by python in browser you can just copy paste what you find in .layout and .data:

        fig.layout["xaxis2"] = {
            "anchor": "y2",
            "domain": [
                0.7413,
                1
            ],
            "matches": "x2",
            "showticklabels": false,
            "showline": false,
            "ticks": "",
            "autorange": true
        }
        fig.layout["xaxis3"] = {
            "anchor": "y3",
            "domain": [
                0,
                0.7363
            ],
            "matches": "x",
            "showticklabels": false,
            "type": "linear",
            "autorange": true
        }
        fig.layout["xaxis4"] = {
            "anchor": "x4",
            "domain": [
                0.7426,
                1
            ],
            "matches": "y3",
            "showticklabels": false,
            "showline": false,
            "ticks": "",
        }
        fig.layout.xaxis.domain = [0, 0.7363];
        fig.layout.xaxis.anchor = "y";
        var x_histogram_data = {
            alignmentgroup: "True",
            bingroup: "x",
            xaxis: "x3",
            yaxis: "y3",
            x: data_for_x,
            type: 'histogram',
            marker: {
                color: '#636efa'
            },
        };

        fig.data.push(x_histogram_data);
        fig.layout["yaxis2"] = {
            "anchor": "x2",
            "domain": [
                0,
                0.7326
            ],
            "matches": "y",
            "showticklabels": false,
            "type": "linear",
            "autorange": true
        }
        fig.layout["yaxis3"] = {
            "anchor": "x3",
            "domain": [
                0.7426,
                1
            ],
            "matches": "y3",
            "showticklabels": false,
            "showline": false,
            "ticks": "",
            "autorange": true
        }
        fig.layout["yaxis4"] = {
            "anchor": "y4",
            "domain": [
                0.7413,
                1
            ],
            "matches": "x2",
            "showticklabels": false,
            "showline": false,
            "ticks": ""
        }

        fig.layout.yaxis.domain = [0, 0.7326];
        fig.layout.yaxis.anchor = "x";

        var y_histogram_data = {
            alignmentgroup: "True",
            bingroup: "y",
            xaxis: "x2",
            yaxis: "y2",
            y: data_for_y,
            type: 'histogram',
            marker: {
                color: '#636efa'
            },
        };

        fig.data.push(y_histogram_data);