Skip to content

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

Merged
merged 22 commits into from
May 10, 2022
Merged
Show file tree
Hide file tree
Changes from 19 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
39 changes: 39 additions & 0 deletions doc/python/axes.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

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 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`.

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 = {"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 +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`.
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
28 changes: 24 additions & 4 deletions doc/python/log-plot.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ jupyter:
text_representation:
extension: .md
format_name: markdown
format_version: '1.2'
jupytext_version: 1.4.2
format_version: '1.3'
jupytext_version: 1.13.7
kernelspec:
display_name: Python 3
display_name: Python 3 (ipykernel)
language: python
name: python3
language_info:
Expand All @@ -20,7 +20,7 @@ jupyter:
name: python
nbconvert_exporter: python
pygments_lexer: ipython3
version: 3.7.7
version: 3.9.0
plotly:
description: How to make Log plots in Python with Plotly.
display_as: scientific
Expand Down Expand Up @@ -60,6 +60,26 @@ fig = px.scatter(df, x="gdpPercap", y="lifeExp", hover_name="country",
fig.show()
```

#### Adding minor ticks

_new in 5.8_

You can position and style minor ticks 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`.

In this example we set the tick length with `ticklen`, add the ticks on the inside with `"ticks": "inside"`, and turn grid lines on with `showgrid: True`.

```python
import plotly.express as px
df = px.data.gapminder().query("year == 2007")

fig = px.scatter(df, x="gdpPercap", y="lifeExp", hover_name="country",
log_x=True, range_x=[1,100000], range_y=[0,100])

fig.update_xaxes(minor = {"ticks": "inside", "ticklen": 6, "showgrid": True})

fig.show()
```

### Logarithmic Axes with Graph Objects

If Plotly Express does not provide a good starting point, it is also possible to use [the more generic `go.Figure` class from `plotly.graph_objects`](/python/graph-objects/).
Expand Down
28 changes: 24 additions & 4 deletions doc/python/time-series.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ jupyter:
text_representation:
extension: .md
format_name: markdown
format_version: '1.2'
jupytext_version: 1.4.2
format_version: '1.3'
jupytext_version: 1.13.7
kernelspec:
display_name: Python 3
display_name: Python 3 (ipykernel)
language: python
name: python3
language_info:
Expand All @@ -20,7 +20,7 @@ jupyter:
name: python
nbconvert_exporter: python
pygments_lexer: ipython3
version: 3.7.7
version: 3.9.0
plotly:
description: How to plot date and time in python.
display_as: financial
Expand Down Expand Up @@ -135,6 +135,26 @@ fig.update_xaxes(
fig.show()
```

### Adding Minor Ticks

_new in 5.8_

You can add minor ticks to an axis with `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`.

In this example, we've added minor ticks to the inside of the x-axis and turned on grid lines.

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

df = px.data.stocks()
fig = px.line(df, x='date', y="GOOG")

fig.update_xaxes(minor = {"ticks": "inside", "showgrid": True})

fig.show()
```

### Summarizing Time-series Data with Histograms

Plotly [histograms](/python/histograms/) are powerful data-aggregation tools which even work on date axes. In the figure below, we pass in daily data and display it as monthly averages by setting `histfunc="avg` and `xbins_size="M1"`.
Expand Down