-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Minor ticks and grid lines docs #3693
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
Changes from 20 commits
391568b
adc5902
50367ce
08dfbf0
b077b87
5c3e9fb
847468c
cb24bbb
6e02e52
32e5b53
b0a051f
f1f2348
dde1912
028c779
dc12a25
ad71fab
0c236ba
0c419c7
0dcad90
94197f9
8dcd351
f10e818
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -380,6 +380,30 @@ fig.update_layout(title_text="Apple Stock Price") | |
fig.show() | ||
``` | ||
|
||
#### Adding minor ticks | ||
|
||
_new in 5.8_ | ||
|
||
You can position and style minor ticks on a Cartesian axis using `minor`. This takes a `dict` of properties to apply to minor ticks. Available properties include: `tickmode`, `tickvals`, `tickcolor`, `ticklen`, `tickwidth`, `dtick`, `tick0`, `nticks`, `ticks`, `showgrid`, `gridcolor`, `griddash`, and `gridwidth`. | ||
|
||
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: `ticks="outside"`. On the x-axis we've specified 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`. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. By default ticks if being visible are located outside. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good point. I've changed it to inside for the y-axis |
||
|
||
Note: Minor ticks and grid lines are not currently supported on color bars, ternary plots, polar charts, geo plots, or on multi-categorical, or 3D axes. | ||
|
||
```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=dict(ticklen=6, tickcolor="black", showgrid=True)) | ||
fig.update_yaxes(minor=dict(ticks="outside")) | ||
|
||
fig.show() | ||
``` | ||
|
||
### Axis lines: grid and zerolines | ||
|
||
##### Toggling Axis grid lines | ||
|
@@ -464,6 +488,21 @@ fig.update_yaxes(showgrid=True, gridwidth=1, gridcolor='LightPink') | |
fig.show() | ||
``` | ||
|
||
_new in 5.8_ | ||
|
||
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`. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @archmoj, should it work like this? That throws an error There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What is the error message? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Created an issue for that #3710 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. | ||
|
Uh oh!
There was an error while loading. Please reload this page.