My app has a chart (a single line plot) like this
chart = (dash.dcc.Graph(id="chart", style={"width": "100%", "height": "500px"}),)
My data looks like this
table = pd.DataFrame(
columns=["state", "Sep24", "Oct24", "Nov24", "Dec24", "Jan24", "Feb24", "Mar24"],
data=[
["TX", 1, 2, 3, 4, 5, 6, 7],
["AK", 7, 6, 5, 4, 3, 2, 1],
["LA", 2, 4, 6, 8, 10, 12, 14],
],
)
There is a callback function that updates the chart when the data for Alaska is edited
@dash.callback(Output("chart", "figure"), Input("table", "data"))
def update_chart(table):
df = pd.DataFrame(table).set_index("state")
data = [
{
"x": df.loc["AK"].index,
"y": df.loc["AK"].values,
"line": {"color": "red"},
"mode": "lines+markers",
}
]
layout = go.Layout(
title=go.layout.Title(text="test", xref="paper", xanchor="center"),
showlegend=False,
)
return {"data": data, "layout": layout}
I’d like the line to remain solid for the history (as is) but I want it to be dashed for the forecast. It is conditional formatting of the line style based on the index (x axis). Can that be achieved at all? Alternatively, can I have a different shading of the chart area for the history and the future? If that is not possible either, how do I add a vertical line on the current month to separate the history and the future?