# Marginal Charts for Plotly JS?

**URL:** <https://community.plotly.com/t/marginal-charts-for-plotly-js/60573>\
**Category:** plotly.js\
**Tags:** question\
**Created:** [January 31, 2022, 2:26pm UTC](https://community.plotly.com/t/marginal-charts-for-plotly-js/60573 "2022-01-31T14:26:42Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![myonchev](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@myonchev](https://community.plotly.com/u/myonchev)\
**Post date:** [January 31, 2022, 2:26pm UTC](https://community.plotly.com/t/marginal-charts-for-plotly-js/60573/1 "2022-01-31T14:26:42Z")

</div>

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:

> **[Ml Regression](https://plotly.com/python/ml-regression/#enhanced-prediction-error-analysis-using-plotlyexpress)**
>
> Visualize regression in scikit-learn with Plotly.

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

---

<div class="post-metadata">

**Author:** ![krystian.moras](https://avatars.discourse-cdn.com/v4/letter/k/d9b06d/32.png) [@krystian.moras](https://community.plotly.com/u/krystian.moras)\
**Post date:** [February 12, 2024, 12:36pm UTC](https://community.plotly.com/t/marginal-charts-for-plotly-js/60573/2 "2024-02-12T12:36:07Z")

</div>

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

```auto
        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);

```