From 728b95e07f1328ba30f4c7d2308cff2766d9f5e9 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Mon, 9 May 2022 20:33:52 -0400 Subject: [PATCH] Minor ticks and grid lines docs (#3693) * Update axes.md - Add minor ticks example - Add griddash example * Minor edit * Update axes.md * Update axes.md * Update axes.md * Update time-series.md * Update time-series.md * Update axes.md * Update axes.md * add log plot example * Update axes.md * Update axes.md * Update axes.md * Update log-plot.md * Update axes.md * Update axes.md * Update time-series.md * Update time-series.md * update to dict( convention * Update axes.md * Update time-series.md --- doc/python/axes.md | 39 ++++++++++++++++++++++++++++++++ doc/python/log-plot.md | 28 +++++++++++++++++++---- doc/python/time-series.md | 47 +++++++++++++++++++++++++++++++++++---- 3 files changed, 106 insertions(+), 8 deletions(-) diff --git a/doc/python/axes.md b/doc/python/axes.md index 6ab2d89681..4f3525cee7 100644 --- a/doc/python/axes.md +++ b/doc/python/axes.md @@ -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 inside: `ticks="inside"`. 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=dict(ticklen=6, tickcolor="black", showgrid=True)) +fig.update_yaxes(minor=dict(ticks="inside")) + +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`. + +```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. diff --git a/doc/python/log-plot.md b/doc/python/log-plot.md index 7cd2d64932..83f993d422 100644 --- a/doc/python/log-plot.md +++ b/doc/python/log-plot.md @@ -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: @@ -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 @@ -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 `howgrid=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=dict(ticks="inside", ticklen=6, showgrid=True))# {"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/). diff --git a/doc/python/time-series.md b/doc/python/time-series.md index a3cc8f03f9..df9e2b33bd 100644 --- a/doc/python/time-series.md +++ b/doc/python/time-series.md @@ -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: @@ -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 @@ -135,6 +135,45 @@ 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=dict(ticks="inside", showgrid=True)) + +fig.show() +``` + +#### Monthly Period Labels With Weekly Minor Ticks + +_new in 5.8_ + +You can set `dtick` on `minor` to control the spacing for minor ticks and grid lines. In the following example, by setting `dtick=7*24*3.6e6` (the number of milliseconds in a week) and setting `tick0="2016-07-04"` (the first Monday in our data), a minor tick and grid line is displayed for the start of each week. When zoomed out, we can see where each month and week begins and ends. + +```python +import pandas as pd +import plotly.express as px + +df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv') +df = df.loc[(df["Date"] >= "2016-07-01") & (df["Date"] <= "2016-12-01")] + +fig = px.line(df, x='Date', y='AAPL.High') +fig.update_xaxes(ticks= "outside", ticklabelmode= "period", tickcolor= "black", tickwidth=2, ticklen=10, minor=dict(ticks="outside", dtick=7*24*3.6e6, tick0="2016-07-04", griddash='dot', gridcolor='pink')) + +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"`.