TL;DR

The annotations in the Update Button example in the Python docs do not update correctly when the buttons are clicked (see images below), apparently due to positioning the annotations using date values on a non-date xaxis. This pull request modifies the code defining the annotations so that the buttons update correctly.

Issue Description

Observed behavior:

When the "High", "Low", and "Both" buttons are clicked:

• The "Low Min" and "High Max" annotations do not appear
• The "High Average" and "Low Average" traces do not appear
• The "High" and "Low" traces do not toggle visibility

The images below show the appearance of the plot

1. In its initial state
2. After clicking the "High" button
3. After clicking the "Low" button
4. After clicking the "Both" button

Initial state:
initial_state

"High" clicked:
high

"Low" clicked:
low

"Both" clicked:
both

Expected behavior:

1. When "None" is clicked, the plot will display the "High" and "Low" traces with no annotations
2. When "High" is clicked, the plot will display the "High" and "High Average" traces, and the "High Average" and "High Max" annotations
3. When "Low" is clicked, the plot will display the "Low" and "Low Average" traces, and the "Low Average" and "Low Min" annotations
4. When "Both" is clicked, the plot will display all traces and annotations.

Proposed solution

• Change the x position of the "High Average" and "Low Average" annotations to use numerical values instead of date values.
• Specify the xanchor, yanchor, xref, and yref attributes for the "High Average" and "Low Average" annotations to ensure correct positioning of the annotations to the left of the figure yaxis.
• Eliminate usage of hex colors in the example.

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 (削除ここまで) Does not modify the first example or add a new example.
• 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 (削除ここまで) No new examples added.
• (削除) The random seed is set if using randomly-generated data in new/modified examples (削除ここまで) No randomly-generated data is used.
• (削除) New/modified remote datasets are loaded from https://plotly.github.io/datasets and added to https://github.com/plotly/datasets (削除ここまで) No datasets added or modified.
• 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