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

Author: LiamConnors

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.

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/).

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