Line Chart with Shaded Bounds

Generate a line chart with adding shaded area around the line series through the shade_series function. The shaded region will appear as a single entity on the legend but when hovering over data points, the lower and upper boundary data values are shown.

• The function shade_series is called and passed into the corresponding argument for the parent series object. This indicates the shading belongs to that series.

• The boundary_column_names argument defines which columns of the input dataset contain the data for the lower and upper bounds of the shaded region.

• The label can be set for the shaded area to name it on the legend and when hovering over data points.

• The color and opacity can optionally be set to control the style of the shaded region

import pandas as pd

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


# For this example, we are simulating a margin of error by adding two columns to a dataframe
# that add +/- bounds of 5% from the base y/y growth column
# In production, these columns should come from the input dataframe
pdf["lower_bound"] = pdf["yy"] - 0.05
pdf["upper_bound"] = pdf["yy"] + 0.05

fig = chart(
    pdf,
    x_axis=axis(column_name="fiscal_qy", label="Fiscal Quarter"),
    y1_axis=axis(label="Downloads Growth Rate", axis_type="percent"),
    chart_series=[
        series(
            column_name="yy",
            label="Y/Y Growth",
            color="dark-blue",
            shade_series=shade_series(
                boundary_column_names=("lower_bound", "upper_bound"),
                label="Margin of Error",
                color="light-blue",
                opacity=0.3,
            ),
        ),
    ],
)

fig