Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minor ticks and grid lines docs #3693

Merged
merged 22 commits into from
May 10, 2022
Merged
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions doc/python/axes.md
Original file line number Diff line number Diff line change
Expand Up @@ -380,6 +380,26 @@ fig.update_layout(title_text="Apple Stock Price")
fig.show()
```

#### Adding minor ticks
You can add minor ticks to an axis by specifying with the `minor` property. This takes a `dict` of properties to apply to minor ticks.
LiamConnors marked this conversation as resolved.
Show resolved Hide resolved

LiamConnors marked this conversation as resolved.
Show resolved Hide resolved
LiamConnors marked this conversation as resolved.
Show resolved Hide resolved
In the following example, we add minor ticks to the x-axis and then to the y-axis. For the y-axis we add ticks on the outside: `minor = {"ticks":"outside"}`. On the x-axis we've spcified some additional properties to style the minor ticks, setting the length of the ticks with `ticklen` and the color with `tickcolor`. We've also turned on grid lines for the x-axis minor ticks using `showgrid`.


```python
import plotly.express as px
import pandas as pd

df = px.data.tips()
fig = px.scatter(df, x="total_bill", y="tip", color="sex")


fig.update_xaxes(minor = {"ticklen": 6, "tickcolor": "black", "showgrid" : True})
fig.update_yaxes(minor = {"ticks":"outside"})

fig.show()
```

### Axis lines: grid and zerolines

##### Toggling Axis grid lines
Expand Down Expand Up @@ -464,6 +484,19 @@ fig.update_yaxes(showgrid=True, gridwidth=1, gridcolor='LightPink')
fig.show()
```

By default grid lines are `solid`. Set the `griddash` property to change this style. In this example we display the x-axis grid lines as `dot`. It can also be set to `dash`, `longdash`, `dashdot`, or `longdashdot`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In addition to those predefined line types, one could use custom values for griddash e.g. "10px" | more info: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@archmoj, should it work like this? That throws an error
fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor='LightPink', griddash='10px')

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the error message?
Here is a codepen you could may adapt which also illustrate the case of "monthly period labels with weekly minor ticks".

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Created an issue for that #3710

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @archmoj I've added an example for "monthly period labels with weekly minor ticks".


```python
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='LightPink', griddash='dot')
fig.update_yaxes(showgrid=True, gridwidth=1, gridcolor='LightPink')

fig.show()
```

##### Styling zero lines

The width and color of axis zero lines are controlled by the `zerolinewidth` and `zerolinecolor` axis properties.
Expand Down