Home The center (x and y axis) of my 2D cartesian graph color not changing accordingly in Plotly?

Questions

The center (x and y axis) of my 2D cartesian graph color not changing accordingly in Plotly?

January 16, 2023

I have this code that makes a 2D cartesian graph and I came across a strange problem. While the quadrant shapes color is changing according to the code, the ones under #AXIS are not changing to black and remaining white, even though im using the same fig.add_shape function, and specifying a black color. It still shows white.

# PLOTLY
axis_range = [-9, 9]

fig = go.Figure()

fig.update_xaxes(range=axis_range, title='', tickmode='linear', showticklabels=False, side='top', gridcolor="rgb(224,224,224)", showgrid=False)
fig.update_yaxes(range=axis_range, title='', tickmode='linear', showticklabels=False, side='right', gridcolor="rgb(224,224,224)", showgrid=False)

fig.update_layout(plot_bgcolor='rgb(255,255,255)', height=800, width=800, margin=dict(l=125, r=125, t=125, b=125))
fig.update_layout(autosize=True)

# AXIS
fig.add_shape(type="rect", x0=-9, y0=0, x1=9, y1=0, fillcolor="#000000", opacity=1, layer="below", line_width=0,)
fig.add_shape(type="rect", x0=0, y0=-9, x1=0, y1=9, fillcolor="#000000", opacity=1, layer="below", line_width=0,)

# Adding color to quadrant
fig.add_shape(type="rect", x0=-9, y0=-9, x1=0, y1=0, fillcolor="#C8E4BC", opacity=1, layer="below", line_width=0,)
fig.add_shape(type="rect", x0=0, y0=-9, x1=9, y1=0, fillcolor="#F5F5A7", opacity=1, layer="below", line_width=0,)
fig.add_shape(type="rect", x0=-9, y0=0, x1=0, y1=9, fillcolor="#F9BABA", opacity=1, layer="below", line_width=0,)
fig.add_shape(type="rect", x0=0, y0=0, x1=9, y1=9, fillcolor="#92D9F8", opacity=1, layer="below", line_width=0,)

What could be the issue here? here is an screenshot:

>Solution :

The solution here is to use the add_trace() function to create a scatter trace with the axis lines. You can set the marker color to black and set the marker opacity to 1 so that the axis lines are visible. Here is an example:

# PLOTLY
axis_range = [-9, 9]

fig = go.Figure()

fig.update_xaxes(range=axis_range, title='', tickmode='linear', showticklabels=False, side='top', gridcolor="rgb(224,224,224)", showgrid=False)
fig.update_yaxes(range=axis_range, title='', tickmode='linear', showticklabels=False, side='right', gridcolor="rgb(224,224,224)", showgrid=False)

fig.update_layout(plot_bgcolor='rgb(255,255,255)', height=800, width=800, margin=dict(l=125, r=125, t=125, b=125))
fig.update_layout(autosize=True)

# AXIS
fig.add_trace(go.Scatter(x=[-9,9], y=[0,0], marker=dict(color="black", opacity=1)))
fig.add_trace(go.Scatter(x=[0,0], y=[-9,9], marker=dict(color="black", opacity=1)))

# Adding color to quadrant
fig.add_shape(type="rect", x0=-9, y0=-9, x1=0, y1=0, fillcolor="#C8E4BC", opacity=1, layer="below", line_width=0,)
fig.add_shape(type="rect", x0=0, y0=-9, x1=9, y1=0, fillcolor="#F5F5A7", opacity=1, layer="below", line_width=0,)
fig.add_shape(type="rect", x0=-9, y0=0, x1=0, y1=9, fillcolor="#F9BABA", opacity=1, layer="below", line_width=0,)
fig.add_shape(type="rect", x0=0, y0=0, x1=9, y1=9, fillcolor="#92D9F8", opacity=1, layer="below", line_width=0,)

fig.show()