Chart Annotations

Annotations can be added to a chart using the annotations argument and passing a list of annotation instances. By default, annotations will include a veritical or horizontal line across the axis it lives on and a text box with a given text message.

• The annotation value and axis_location controls its position and should be set to the value on the corresponding axis_location

• The annotation text controls the text of the message. If line breaks are needed pass as an html tag, eg <br/>

• The annotation position controls the relative positioning of the message from the line drawn.

• Annotations can be colored via the color attribute

• Annotations can have arrows, set the showarrow=True in the extra_options of the annotation

from datetime import date

import pandas as pd
from dateutil.relativedelta import relativedelta

from visualization_toolkit.helpers.plotly import chart, axis, series, annotation


fig = chart(
    pdf,
    x_axis=axis(
        column_name="day",
        axis_type="date",
        label="Week Ending",
        tick_interval=relativedelta(days=7 * 6),
    ),
    chart_series=[
        series(
            column_name="abnb_gbv_share",
            label="ABNB GBV Share",
            color="dark-blue",
        ),
        series(
            column_name="vrbo_gbv_share",
            label="VRBO GBV Share",
            color="red",
        ),
    ],
    y1_axis=axis(
        axis_type="percent",
        axis_min=0,
        axis_max=1,
        tick_format="0.0%",
    ),
    annotations=[
        annotation(
            text="Q2 Start",
            value=date(2024, 4, 1),
            axis_location="x",
            position="top right",
        ),
        annotation(
            text="Labor Day",
            value=date(2024, 9, 3),
            axis_location="x",
            color="green",
        ),
        annotation(
            text="Q3 Start",
            value=date(2024, 10, 1),
            axis_location="x",
        ),
        annotation(
            text="2023 Peak VRBO GPV Share",
            value=0.34,
            axis_location="y1",
            color="orange",
            position="top left",
        ),
        annotation(
            text="Floating Annotation",
            value=(date(2024, 6, 1), 0.66),
            axis_location=None,
            color="red",
            position="top left",
            extra_options={"showarrow": True},
        ),
    ],
)

fig