Search⌘ K
AI Features
Home
Courses
Mastering Plotly and Dash Data Visualization with Python

Date Buttons on Line Charts

Explore how to enhance Plotly line charts by adding interactive date buttons. Understand how to configure button properties like count, label, and step to filter stock price data dynamically, enabling efficient time-series analysis without manual data subsetting.

We'll cover the following...

Our data

For this lesson, let’s use some data on the stock price of Alibaba. We can print out the top few rows to see what it looks like below:

Python 3.8
# Import libraries
import pandas as pd
import numpy as np
# Import datasets
alibaba = pd.read_csv('/usr/local/csvfiles//alibaba.csv', parse_dates=['Date'])
print(alibaba.head())

Let’s plot all of the data to ascertain the patterns in the data:

Python 3.8
# Import libraries
import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots
# Import dataset
alibaba = pd.read_csv('/usr/local/csvfiles//alibaba.csv', parse_dates=['Date'])
# Make traces and add
trace1 = go.Scatter(x=alibaba['Date'], 
                    y=alibaba['Open'], 
                    marker=dict(color='#7F00FF'),
                    name='Opening Price',
                    mode='lines')
trace2 = go.Scatter(x=alibaba['Date'], 
                    y=alibaba['Close'], 
                    marker=dict(color='black'),
                    name='Closing Price',
                    mode='lines')
fig = go.Figure(data=[trace1, trace2])
# Format and show
fig.update_layout(title=go.layout.Title(text='Alibaba Stock prices', x=0.5, xref='paper'))
fig.show()

Now we could use pandas and filter the data so that we only get the range we are interested in, but it turns out that we can filter by date effortlessly using Plotly functionality. This introduces us to the next ...