✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Fill to bottom of graph without changing y axis

I’m trying to fill to bottom of the graph without changing the graph to go all the way to zero. Is there a way to do this without creating a new line?

ie. Current y-axis goes from 100-200, when fill tozeroy is added, the new y-axis will be 0-200.

I see a couple quick solutions, both relating to the figure Layout.

  1. Set the layout axis property fixedrange=True.
layout = { .., 
       'yaxis': {'fixedrange': True, 
                 'range': [100, 200],
                 ..},
       ..}

You can combine this with the ‘range’ property to define the [100, 200] view.

  1. If you are drawing the line dynamically, you might not want to use fixedrange=True. In the callback where you are updating your graph, import the figure as a state variable. From the state variable you can grab the range value (fig['layout']['yaxis']['range']) and add that to the layout dict for the figure you will be returning.
@app.callback(
  Output('my-graph', 'figure'),
  [Input(.. some input or event)],
  [State('my-graph','figure')])
def update_graph(my_input, fig):
  range_to_save = fig['layout']['yaxis']['range']
  ..