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

Conversation

LiamConnors
Copy link
Member

@LiamConnors LiamConnors commented Apr 27, 2022

Documentation PR

  • I've seen the doc/README.md file
  • This change runs in the current version of Plotly on PyPI and targets the doc-prod branch OR it targets the master branch
  • If this PR modifies the first example in a page or adds a new one, it is a px example if at all possible
  • Every new/modified example has a descriptive title and motivating sentence or paragraph
  • Every new/modified example is independently runnable
  • Every new/modified example is optimized for short line count and focuses on the Plotly/visualization-related aspects of the example rather than the computation required to produce the data being visualized
  • Meaningful/relatable datasets are used for all new examples instead of randomly-generated data where possible
  • The random seed is set if using randomly-generated data in new/modified examples
  • New/modified remote datasets are loaded from https://plotly.github.io/datasets and added to https://github.com/plotly/datasets
  • Large computations are avoided in the new/modified examples in favour of loading remote datasets that represent the output of such computations
  • Imports are plotly.graph_objects as go / plotly.express as px / plotly.io as pio
  • Data frames are always called df
  • fig = <something> call is high up in each new/modified example (either px.<something> or make_subplots or go.Figure)
  • Liberal use is made of fig.add_* and fig.update_* rather than go.Figure(data=..., layout=...) in every new/modified example
  • Specific adders and updaters like fig.add_shape and fig.update_xaxes are used instead of big fig.update_layout calls in every new/modified example
  • fig.show() is at the end of each new/modified example
  • plotly.plot() and plotly.iplot() are not used in any new/modified example
  • Hex codes for colors are not used in any new/modified example in favour of these nice ones

Code PR

  • I have read through the contributing notes and understand the structure of the package. In particular, if my PR modifies code of plotly.graph_objects, my modifications concern the codegen files and not generated files.
  • I have added tests (if submitting a new feature or correcting a bug) or
    modified existing tests.
  • For a new feature, I have added documentation examples in an existing or
    new tutorial notebook (please see the doc checklist as well).
  • I have added a CHANGELOG entry if fixing/changing/adding anything substantial.
  • For a new feature or a change in behaviour, I have updated the relevant docstrings in the code to describe the feature or behaviour (please see the doc checklist as well).

-->

@LiamConnors LiamConnors changed the title Minor ticks grid lines docs (draft) Minor ticks and grid lines docs (draft) Apr 27, 2022
@nicolaskruchten
Copy link
Contributor

Nice! Can you also add an example to the other axes pages like https://plotly.com/python/time-series/ and https://plotly.com/python/log-plot/ (if applicable) ?

doc/python/axes.md Outdated Show resolved Hide resolved
@LiamConnors
Copy link
Member Author

Nice! Can you also add an example to the other axes pages like https://plotly.com/python/time-series/ and https://plotly.com/python/log-plot/ (if applicable) ?

I added an example to time-series. It's not supported on log axes. I added a note to say where it isn't supported.

doc/python/axes.md Outdated Show resolved Hide resolved
doc/python/axes.md Outdated Show resolved Hide resolved
doc/python/axes.md Outdated Show resolved Hide resolved
@archmoj archmoj requested a review from alexcjohnson May 3, 2022 13:40
doc/python/axes.md Outdated Show resolved Hide resolved
@LiamConnors LiamConnors marked this pull request as ready for review May 3, 2022 14:06
@LiamConnors LiamConnors changed the title Minor ticks and grid lines docs (draft) Minor ticks and grid lines docs May 3, 2022
doc/python/axes.md Outdated Show resolved Hide resolved

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: `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`.
Copy link
Contributor

Choose a reason for hiding this comment

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

By default ticks if being visible are located outside.
I suggest on the y-axis we demo how they could be placed inside.

Copy link
Member Author

Choose a reason for hiding this comment

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

Good point. I've changed it to inside for the y-axis

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

@LiamConnors LiamConnors requested a review from archmoj May 9, 2022 16:12
@nicolaskruchten nicolaskruchten merged commit 728b95e into master May 10, 2022
@nicolaskruchten nicolaskruchten deleted the minor-ticks-grid-lines-docs branch May 11, 2022 18:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants