An easy Guide for creating stunning, interactive Candlestick Charts (Python)

When I do research for my blog I often come across some pretty ugly charts. I mean, the kind that makes your eyes bleed: Neon-bright colors, pixelated, too tiny, disproportioned, with an incompatible color scheme - I’ve seen it all. Sometimes there are more candles cramped into the chart than on an 90 year-old’s birthday cake.

This is a step-by-step guide on how to create stunning, interactive candlestick charts in Python.

This story is solely for general information purposes, and should not be relied upon for trading recommendations or financial advice. Source code and information is provided for educational purposes only, and should not be relied upon to make an investment decision. Please review my full cautionary guidance before continuing.

How much data to display?

When creating candlestick charts, the first guideline is not to display too many candles in the chart.

If you need to display a huge amount of data each individual candle may not be visible and it may be more useful to use a line chart unless you want to use the interactive zoom-in functionality of an interactive chart.

When reviewing the charts from the experts at ‘stockcharts.com’ I noticed that they display between 200 and 250 bars in a single chart so that seems like a good guideline.

There are situations in which you want to focus the viewer’s attention on a particular scenario like a candlestick pattern in which case you want to display less data in a chart.

Picking an Image Size

Oftentimes the chart images I see are blurry or pixelated, which means that the image was created at a smaller size and then resized to be bigger.

The size of the chart naturally depends on the space available and your particular use case.

If you don’t have the exact dimensions, it’s better to create a larger image and let the browser resize it to fit the available space to prevent loss of quality. Make sure to preserve the aspect ratio of the chart to avoid distortion.

If you don’t have an exact size for your image, Shutterstock.com recommends the following image sizes, which are commonly used across the web.

• 1920 x 1080 px

• 1280 x 720 px

• 1080 x 1080 px.

Picking a Color Scheme

When creating candlestick charts, you want to pick a color scheme of compatible colors. However, the shades have to be sufficiently different so that the viewer can differentiate between the different lines and pieces of information.

If you are not great at picking colors yourself like me, I suggest using a predefined color scheme for your chart. There are a lot of options out there:

• ‘Learn UI Design’ provides an easy-to-use color palette generator

• Here a color palette generator from colors.co.

• This blog has a list of color palettes specifically for data visualization.

Plotly Express also has a set of color swatches you can check out with the following statement:

import plotly.express as px

fig = px.colors.qualitative.swatches()
fig.show()

These swatches are basically just Python lists, so you can access a particular hex color code by using the list index.

Python Libraries to Use

There are a lot of Python library you can use for plotting candlestick charts, for example mplfinance, plotly, bokeh, bqplot, and cufflinks.

In my opinion plotly is the most popular and has great documentation. This is the one we are going to use for this tutorial.

However, I encourage you to try out the different options and see which one you like best.

To make the chart interactive, we are going to use the low-code framework for building app called ‘Dash’ developed by Plotly. It’s built on top of the web app framework ‘Flask’ and provides the ability to create an app with a few lines of code.