gridwidth is not the same for all gridlines
Question:
I am facing a problem with the gridwidth not the same for all grid lines. The thickest lines vary when you zoom-in and zoom-out. I need to make all grid lines have the same width.
Thank you for your help.
import plotly.express as px
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", facet_col="species")
fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor='black')
fig.show()
Answers:
It is totally a problem of rendering. You might have this problem becuase you are using Jupyter notebook as me. It can be solved with two options:
-
Change the default rendering which is notebook to svg or browser. You should simply use:
fig.show(renderer="browser")
-
Second option is to increase the value of gridwidth to 2
If we increase the gridwidth more than 2, the problem is solved more significantly.
With gridwidth=3:
Last note
The issue is only when we plot over the browser, but when I download the image and open it, all lines of the grid have the same width. The image below is the downloaded image with gridwidth=1 which is the same in the question:
I am facing a problem with the gridwidth not the same for all grid lines. The thickest lines vary when you zoom-in and zoom-out. I need to make all grid lines have the same width.
Thank you for your help.
import plotly.express as px
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", facet_col="species")
fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor='black')
fig.show()
It is totally a problem of rendering. You might have this problem becuase you are using Jupyter notebook as me. It can be solved with two options:
-
Change the default rendering which is
notebooktosvgorbrowser. You should simply use:fig.show(renderer="browser") -
Second option is to increase the value of
gridwidthto 2
If we increase the gridwidth more than 2, the problem is solved more significantly.
With gridwidth=3:
Last note
The issue is only when we plot over the browser, but when I download the image and open it, all lines of the grid have the same width. The image below is the downloaded image with gridwidth=1 which is the same in the question: