Shape in pixels

plotly.js
1

I have a circle in the graph and I would like the size of the circle not to change when zoomed, but to measure the same pixels as when I created it. Is there any parameter for the shapes so that they use measurements in pixels?

image
image1827×1080 55.1 KB

As you can see in the image, both lines have two circles at the ends (draggers), the one on the left is how it looks after zooming in and the right one is drawn after zooming in to show how the circles at the ends of the line should continue to look. left line but these changed size when zooming; I think that with xsizemode and ysizemode the unit of measurement is changed to pixels but I don’t know how to use it or if it is correct that that is what it is for

2

I think markers don’t change size on zoom. Is it possible to draw the circles as markers with symbol=“circle-open”?

3

If I had already thought about it, the problem is that the markers are for graphics and I am using shapes, I considered using graphics to represent lines but when I start creating more complex shapes the graphics are not going to work, and the graphics are limited to the axis on which are drawn and the shapes are not

4

Accomplished

This is the code of everything I was trying and that I left commented at the end I found the following link which is from another topic but I applied the configuration I had and it worked draggging multiple points using plotly - #2 by cpsievert - General - Posit Community

And this is the code for the circles (draggers) commented on everything I tried

    Plotly.update(this.#layer, {}, {
        [`shapes[${this.#index}]`]: {
            id: this.id,
            name: "dragger",
            type: 'circle',
            xref: 'x',
            yref: 'y',
            // xref: 'paper',
            // yref: 'paper',
            // xanchor: this.#layer._fullLayout.xaxis.r2fraction(this.#layer._fullLayout.xaxis.p2r(this.#x)),
            // yanchor: this.#layer._fullLayout.yaxis.r2fraction(this.#layer._fullLayout.yaxis.p2r(this.#y)),
            xanchor: this.#layer._fullLayout.xaxis.p2d(this.#x),
            yanchor: this.#layer._fullLayout.yaxis.p2c(this.#y),
            // xanchor: this.#x,
            // yanchor: this.#y,
            xsizemode: 'pixel',
            ysizemode: 'pixel',
            // x0: this.#layer._fullLayout.xaxis.r2fraction(this.#layer._fullLayout.xaxis.p2r(this.#x - 5)),
            // x1: this.#layer._fullLayout.xaxis.r2fraction(this.#layer._fullLayout.xaxis.p2r(this.#x + 5)),
            // y0: this.#layer._fullLayout.yaxis.r2fraction(this.#layer._fullLayout.yaxis.p2r(this.#y - 5)),
            // y1: this.#layer._fullLayout.yaxis.r2fraction(this.#layer._fullLayout.yaxis.p2r(this.#y + 5)),
            // x0: this.#layer._fullLayout.xaxis.p2d(this.#x[0]),
            // x1: this.#layer._fullLayout.xaxis.p2d(this.#x[1]),
            // y0: this.#layer._fullLayout.yaxis.p2c(this.#y[0]),
            // y1: this.#layer._fullLayout.yaxis.p2c(this.#y[1]),
            x0: -5,
            x1: 5,
            y0: -5,
            y1: 5,
            visible: true,
            fillcolor: 'rgb(19,23,34)',
            line: {
                color: 'rgb(51,102,255)',
                width: 1
            }
        }
    })

Animation