Candlestick Charts in Python with Plotly

• Demonstrate how to create a basic candlestick chart in Python 3
• Demonstrate how to highlight/annotate points on the chart.

Keywords: Python, Plotly, OHLC, Candlestick Charts, Jupyter, Pandas, Traders

Step 1 – Get the Minute Bar Data for the Candlestick Chart

# Imports that you are going to need to read a file
import pandas as pd

# Read the file using pandas - so much easier than writing your own file I/O!
df_symbol_bar_Data = pd.read_csv("bar.csv")

# Show some of the data you read
df_symbol_bar_Data.head()

This results in the following output:

Now you have data you can chart. Your OHLC data is in your memory table and can be used to populate the candlestick chart.

Step 2 – Build your Candlestick Chart

####### Import the library you need to create the chart
import plotly.graph_objs as go

To build the chart we need to give the candlestick chart a the X axis (horizontal) and multiple points representing the OHLC points on the Y axis (vertical). We do this with the graph_objs.

data=[go.Candlestick(x=df_symbol_bar_Data['datetime'],
                open=df_symbol_bar_Data['open'],
                high=df_symbol_bar_Data['high'],
                low=df_symbol_bar_Data['low'],
                close=df_symbol_bar_Data['close'])]

Now that we have the data we can plot it onto our screen.

figSignal = go.Figure(data=data)
figSignal.show()

This will be result in the following graph:

1. By default you can zoom in on any point on the graph using drag with your mouse.
2. You can also zoom with the slider control under the graph.
3. The control icons on the top right have the ability to reset your zoom and other fun stuff. I suggest you play with it because I don’t want to take the time to write about it today.

Step 3 – Add Titles to the Chart and Each Axis

# Create a basic layout that names the chart and each axis.
layout = dict(
        title="FB Facebook",
        xaxis=go.layout.XAxis(title=go.layout.xaxis.Title( text="Time")),
        yaxis=go.layout.YAxis(title=go.layout.yaxis.Title( text="Price $ - US Dollars"))
)


# set the data from our data frame
data=[go.Candlestick(x=df_symbol_bar_Data['datetime'],
                open=df_symbol_bar_Data['open'],
                high=df_symbol_bar_Data['high'],
                low=df_symbol_bar_Data['low'],
                close=df_symbol_bar_Data['close'])]

# display the Candlestic chart with the optional layout
figSignal = go.Figure(data=data, layout=layout)
figSignal.show()

Step 4 – Removing the Slider Control – Changing the Graph Size

• The slider at the bottom, while useful for interacting, doesn’t look nice.
• The height of the chart is too small.
• The width could be smaller.

# Create a basic layout that names the chart and each axis.
layout = dict(
        title="FB Facebook",
        xaxis=go.layout.XAxis(title=go.layout.xaxis.Title( text="Time (EST - New York)"), rangeslider=dict (visible = False)),
        yaxis=go.layout.YAxis(title=go.layout.yaxis.Title( text="Price $ - US Dollars")),
        width=1000,
        height=800
)

# set the data from our data frame
data=[go.Candlestick(x=df_symbol_bar_Data['datetime'],
                open=df_symbol_bar_Data['open'],
                high=df_symbol_bar_Data['high'],
                low=df_symbol_bar_Data['low'],
                close=df_symbol_bar_Data['close'])]

# display the Candlestic chart with the optional layout
figSignal = go.Figure(data=data,layout=layout)
figSignal.show()

This produces the following chart with better dimensions.

Step 5 – Showing a Point of Interest (annotating)

from datetime import datetime
low_time = datetime(2019, 8, 22, 10, 33, 0, 0)
low_px = 179.91

high_time = datetime(2019, 8, 22, 9, 31, 0, 0)
high_px = 184.15

#######################################################
# Adding annotations for the high and low of the day.
annotations = []
annotations.append(go.layout.Annotation(x=low_time,
                                        y=low_px,
                                        showarrow=True,
                                        arrowhead=1,
                                        arrowcolor="purple",
                                        arrowsize=2,
                                        arrowwidth=2,
                                        text="Low"))

annotations.append(go.layout.Annotation(x=high_time,
                                        y=high_px,
                                        showarrow=True,
                                        arrowhead=1,
                                        arrowcolor="purple",
                                        arrowsize=2,
                                        arrowwidth=2,
                                        text="High"))
# Create a basic layout that names the chart and each axis.
layout = dict(
        title="FB Facebook",
        xaxis=go.layout.XAxis(title=go.layout.xaxis.Title( text="Time (EST - New York)"), rangeslider=dict (visible = False)),
        yaxis=go.layout.YAxis(title=go.layout.yaxis.Title( text="Price $ - US Dollars")),
        width=1000,
        height=800,
        annotations=annotations
)


# set the data from our data frame
data=[go.Candlestick(x=df_symbol_bar_Data['datetime'],
                open=df_symbol_bar_Data['open'],
                high=df_symbol_bar_Data['high'],
                low=df_symbol_bar_Data['low'],
                close=df_symbol_bar_Data['close'])]

# display the Candlestic chart with the optional layout
figSignal = go.Figure(data=data,layout=layout)
figSignal.show()

Conclusion – Final Thoughts

*Tayloe’s pet peeve: I hate poorly labeled charts. Always label your subject, currency, and time zone.   Do not assume that only Americans on the east coast will be reviewing the chart. Do assume that someone else is going to copy your chart and use it without your supporting documentation.

About Tayloe Draughon

Tayloe is the Senior Product Manager at CloudQuant. He is a FINTECH innovator and entrepreneur. His profile can be found on LinkedIn.

bar.csv – The data file used in this post

Copy this table to a file called “bar.csv” if you want the above code to work as written.