Is there a way to add go.layout.Shape to a polar plot? There is no xref and yref for a polar plot, just subplot. Maybe this should be a feature request?
@openafox You cand define shapes in polar coordinates as filled closed curves. Below you find a function that defines the polar coordinates of the points on a circle of center (r0, theta0) and radius rho., as well as three shapes defined as go.Scatterpolar lines that define a filled close curve:
import plotly.graph_objects as go
import numpy as np
from numpy import pi, sin, cos, sqrt, arctan2
def circle(r0, theta0, rho, degrees = True):
# compute the polar coordinates for 100 points on a circle of center (r0, theta0) and radius rho
if degrees:
theta0 = theta0 * pi / 180
phi = np.linspace(0, 2*pi, 100)
x = rho * cos(phi) + r0 * cos(theta0)
y = rho * sin(phi) + r0 * sin(theta0)
r = sqrt(x**2 + y**2)
J = np.where(y<0)
theta = arctan2(y, x)
theta[J]= theta[J] + 2*pi
return (r, theta * 180 / pi) if degrees else (r, theta)
#define a general "shape"
fig = go.Figure(data = [go.Scatterpolar(
name = '',
r = [2, 3, 1, 4, 7, 5, 2, 2],
theta = [57, 229, 114, 85, 85, 343, 286, 57],
fill='toself',
mode='markers+lines',
marker_size=0.1)])
#define a curvilear rectangle
alpha = np.linspace(180,240, 60).tolist()
theta = alpha + alpha[::-1] + [alpha[0]]
fig.add_trace(go.Scatterpolar(r= [4]*60 + [6]*60+[4],
theta =theta,
name='',
fill='toself'))
#define a filled circle
r, theta = circle(4, 135, 1.5)
fig.add_trace(go.Scatterpolar(r=r, theta=theta,
mode='lines',
fill='toself',
name=''));
fig.update_layout(width=500, height=500, showlegend=False)
@empet Thank you for your answer. I guess I needed to be more clear. This adds shapes as traces is there a way to do it as annotations (Layout). Like https://plot.ly/python/shapes/
I need them to be separate from traces so that update_traces() does not apply.
@openafox No, you can define fig.layout.shapes only in cartesian coordinates. But what’s the point with shapes defined as go.Scatterpolar plots?You add first the shapes to the fig and then your usual traces. This order accounts for the layer=‘below’.
@openafox Well, you can define shapes with respect to ‘paper’, but it is difficult to control the position ( x0, y0, x1, y1 _ of lines, rectangles, and circles, with respect to the polar plot.
If fig.layout.width, and height are not set by the user, Plotly uses the default values, and here is how the shapes are drawn:
shapes = [dict( type="circle",
xref="paper",
yref="paper",
x0=0.2,
y0=0.3,
x1=0.4,
y1=0.5,
line_color="LightSeaGreen",
fillcolor = "LightSeaGreen"
),
dict(type="line",
xref="paper",
yref="paper",
x0=0,
y0=0.5,
x1=0.45,
y1=0.85,
line=dict(
color="DarkOrange",
width=3,
),)
]
fig.layout.shapes=shapes
After setting width and height we get:
fig.update_layout(width=500, height=500)
we get:
Hello,
I also would like to plot the circle with center and radius into polar graph by using Plotly js. Can you please let me is there any way to do that.
Thanks in Advance.
@vlearns19 You can define a circle in polar coordinates translating to plotly.js the function circle() defined in my first answer above or with less control as in the second answer, i.e. as a Plotly shape defined in paper coordinates. Here you can find examples of shapes in plotly.js: https://plot.ly/javascript/shapes/.
@empet With the reference of above function i was able to draw the circle in polar grid. But i also need to draw the circle by using radius and x and y points in Cartesian system. Can you please let me know if you have any suggestion?
A circle of center (x_c, y_c) and radius r is defined as a plotly shape with respect to a cartesian system like in this tutorial https://plot.ly/javascript/shapes/#circle:
{
type: 'circle',
xref: 'x',
yref: 'y',
x0: 1,
y0: 1,
x1: 3,
y1: 3,
line: {
color: 'rgba(50, 171, 96, 1)'
}
}
where the point of coordinates (x0, y0) is the lower left point, (x_c-r, y_c-r), of the square in which the circle is inscribed,
while the point (x1, y1) is the upper right corner of the same square.
The cartesian coordinates can be given with respect to the plot, as in the above example or with respect to the paper. In the latter case
we define, xref, yref as follows:
xref: "paper",
yref: "paper"
To fill the circle with a color just insert in the shape definition:
fillcolor: 'rgba(50, 171, 96, 0.7)'