Black Lives Matter. Please consider donating to Black Girls Code today.

Simple example of annotations on a time series

There is an abundance of great examples of basic time series charts (e.g. here). These are really great and easy to use. Non python experts can easily see where they need to slot their data into the example and alter the chart to suit their purpose, so this is all fine and well.

The very next thing people usually want to do after creating a chart is to talk about it, and this often involves incorporating text boxes that point to specific points on the time series. See some super basic examples here and here

An ideal annotation might comprise:

  1. Annotation text
  2. A line from the annotation to the part of the chart it relates to
  3. Optional box around the annotation text to improve aesthetic

My questions:

  1. Is there any way of easily doing this in plotly/dash?
  2. Are there some simple examples somewhere where I can slot in my own data/annotations and build my own?

Bonus question: is there a way to reduce the number of annotations as the user zooms out and increase the number of annotations as the user zooms it? (e.g. 10 years of stock price data might have 100s of annotations, which would be very cluttered without reducing the number of annotations)

In short: Yes!

In not-so-short: Remember at all times that Dash is a plot.ly product. This means that we can put whatever nice figures and plots from plot.lys library and put into our apps.
From plot.ly documentation you find this; https://plot.ly/python/text-and-annotations/. Here you will find help on how to include text boxes, customize hover-text annotations and more.