Custom Color Scale for Scatter Chart

plotly.js
1

I have a scatter plot with multiple series as such:

let scatterPlot = {
                x: scatterData.map((a) => a.x),
                y: scatterData.map((a) => a.y),
                name: data.seriesName,
                type: 'scattergl',
                mode: 'markers',
                marker: {
                    color: scatterData.map((a) => a.color),
                    size: scatterData.map((a) => a.size),
                },
            };

As you can see, the color for each marker point is defined. Iā€™m using my own calculated color scale.

What I would like to do is add a color scale axis/bar on the right of the chart which is defined by myself from the color data that I have. For example:

var colorscale = [
            ['0.0', 'rgb(165,0,38)'],
            ['0.111111111111', 'rgb(215,48,39)'],
            ['0.222222222222', 'rgb(244,109,67)'],
            ['0.333333333333', 'rgb(253,174,97)'],
            ['0.444444444444', 'rgb(254,224,144)'],
            ['0.555555555556', 'rgb(224,243,248)'],
            ['0.666666666667', 'rgb(171,217,233)'],
            ['0.777777777778', 'rgb(116,173,209)'],
            ['0.888888888889', 'rgb(69,117,180)'],
            ['1.0', 'rgb(49,54,149)']
        ];

let layout = {
            yaxis: {
                title: this.yAxisTitle,
                automargin: true,
            },

            xaxis: {
                title: this.xAxisTitle,
                automargin: true,
            },

            coloraxis: {
                autocolorscale: false,
                colorscale: colorscale,
                colorbar: {
                    title: {
                        text: this.colorAxisTitle,
                        side: 'right',
                        font: {
                            size: this.yAxisFontSize,
                            color: this.yAxisFontColor,
                        },
                    },
                    tickfont: {
                        size: this.yAxisFontSize,
                        color: this.yAxisFontColor,
                    },
                }
            }
        };

The above does not work.

Any idea how this can be done ? I tried to use a built-in color scale per series, however, it gives a different bar and scale for each series. I want a common bar for all series which I already pre-calculated.