Scatterplot: Autorange but with fixed minimum at 0

[Martin73]

Hi there,

I want to plot a scatterplot with following specifications:

(1) the scale of x and y axis should be 1:1 (no distortion)
(2) both ranges of the axis have their minimum at 0.
(3) the maximum of the y axis is taken from the data (autorange?)
(4) the maximum of the x axis should be derived from (1), (2) and (3).

I’ve tried to set the layout to this:

var layout = {
                xaxis: {
                    title: 'Durchmesser',
                    scaleanchor: "y",
                    autorange: true
                },
                yaxis: {
                    title: 'Umfang',
                    autorange: true
                },
                autosize: true
            };

which results in this:

But I would like to have this, instead:

(this pic was modified manually using the pan tool)

Does anybody know how to achieve this? I’ve tried and researched for hours without success.

Thanks a lot, Martin

[Saratoga]

Assuming that “y” is an array with the graph data

xaxis: { range: [ 0, Math.max(…y) ] } }

[Martin73]

Thanks, I will try! Do I have to keep the autorange: true or skip this?

[Martin73]

I did some attempts, it works half way. Now the y axis begins in the negative, which it shoudn’t and when I resize the window it gets back to both axis negative. It looks like this now:

This is the code:

var traceScatter = {
                x: circleData.map(d => d.diameter),
                y: circleData.map(d => d.circumference),
                text: updateTraceScatterText(circleData), // Nutzung der Funktion mit Parameter
                mode: 'markers',
                type: 'scatter',
                marker: {
                    color: '#34aed6'
                },
                name: `Messungen`,
                hoverinfo: 'text' // Nur der Text wird im Hover-Text angezeigt, nicht der Name
            };

            var traceLine = {
                x: [0, maxDiameter],
                y: [0, beta * maxDiameter],
                mode: 'lines',
                type: 'scatter',
                line: {
                    color: '#d94368',
                    width: 2
                },
                name: `y = ${beta.toFixed(2)}x`,
                visible: 'legendonly' // Standardmäßig ausgeschaltet
            };

            var layout = {
                hovermode: 'closest',
                hoverinfo: 'text',
                title: 'Streudiagramm Durchmesser und Umfang',
                xaxis: {
                    title: 'Durchmesser',
                    scaleanchor: 'y',
                    range: [ -5, Math.max(...traceScatter.y) ]
                },
                yaxis: {
                    title: 'Umfang',
                    autorange: true
                },
                autosize: true,
                showlegend: false // Legende standardmäßig ausgeschaltet
            };

            var config = {responsive: true}

            try {
                Plotly.newPlot('actualPlotContainer', [traceScatter, traceLine], layout, config); // Plot im neuen div
            } catch (error) {
                console.error('Plotly Fehler:', error);
            }

[RenaudLN]

See yaxis autorangeoptions Layout.yaxis in Python you can force the autorange to include 0 for instance.

[Martin73]

Thanks for the help - I’ve tried, but it just doesn’t work.

I have now created a mockup in codepen, maybe it’s easier to get the issue. Here is the link:

https://codepen.io/Martin73/pen/QWXgbOK

I have kept the div-structure of my project and put the plotly in the div “actualPlotContainer”. If one resizes the window, the plot should adjust in size but with keeping x-axis from 0 to auto, which it doesn’t. yaxis should also range from 0 to auto, which seems to work. Furthermore, xaxis should scale to yaxis (keep aspect ratio at 1:1). I’ve used scaleanchor for this, which seems to be part of the problem, because, if I drop it, it works fine (but, of course, aspect ratio then isn’t locked to 1:1 anymore!).

I am very glad, if anybody could tell me, what I’m doing wrong and how I have to set up this ploty to behave as I intend. So far I am close to believe that there is an error in the plotly code… prove me wrong and I am happy!

Thanks for any hints,

Martin

[Martin73]

So after some research I found constrain and constraintowards and could solve my problem with this almost completely. Only when I zoom in using a zoom area with the mouse, I can still mess around. But I think, I will disable zooming anyways, so I’m good.

Thanks to everybody for helping!