✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

How to set padding between graph data and graph limits?

Hello, all. After sleuthing around I found a similar question here, but that deals with padding between the graph itself and any object around it, and not what I am talking about.

Here are two pictures:


In my project, when little data is graphed, there is this extra space created on the sides of it, whereas with larger datasets, the padding disappears. How do I control this property to turn it off?

It looks like the x-axis property of your figure is automatically trying to guess the best range for your plot. If you set the x-axis limit by using the minimum and maximum value of your plotted data, I believe it will fix this issue.

In that vein, I am attempting to use xaxis.range to manually set the limits, but my graph does not generate anymore if I do that.

Here is my code, which I am using to graph some simple stock data with a datetime index.

    return dcc.Graph(
        id='time-series_graph',
        figure={
            'data': [
                {'x': data.index, 'y': data.close, 'type': 'line', 'name': name, 'xaxis': {'range': [data.index[0], data.index[-1]]}}
            ],
            
            'layout': 
                {'title': name, 'shapes': shape_info}      
            }
        )