https://levelup.gitconnected.

com/replicating-tradingview-chart-in-python-8bb6ff00bb4e

Search Medium

Write

Get unlimited access to the best of Medium for less than $1/week.

Become a member

Image by Author

Replicating TradingView Chart

in Python
With as less than 3 lines of code
Nikhil Adithyan
·

Follow
Published in

Level Up Coding

9 min read

Aug 2

350
5

I’ve always been a huge fan of TradingView’s charting tool,

especially for its beautifully crafted user interface and
design. And there’s never been a day I haven’t thought
about recreating the graph design in Python.

But, it’s always tough for Python developers to create

stunning and professional-looking visualizations (like
TradingView) using libraries like Matplotlib, Seaborn,
Altair, etc. Their style themes are so outdated and crappy.
Though all these modules provide features for customizing
the theme of the charts, it takes a toll on the developer as
there is a lot of work involved.

Fortunately, I recently came across an awesome library

called lightweight-charts-python providing features to easily
re-create the TradingView style with minimal code. In this
article, we will dive deep into this library, explore its
features, and code some cool TradingView charts in
Python.

Importing Packages
The first and foremost step of setting up the coding
environment is to import the required packages. In this
article, we are going to use five different packages which
are pandas for data manipulation, and requests for making
API calls, numpy for numerical
calculations, lightweight_chart for replicating the
TradingView look, time for time-related functions, and
finally asyncio and nest_asyncio for asynchronous
programming. The following code will import all the
mentioned packages into our Python environment:

import pandas as pd
import requests
import numpy as np
from lightweight_charts import Chart
import time
import asyncio
import nest_asyncio
nest_asyncio.apply()
If you haven’t installed any of the imported packages,
make sure to do so using the pip command in your
terminal. Before moving further, for extracting the data,
we’ll be using the APIs of FinancialModelingPrep. So for
the smooth execution of the upcoming code block, you
need to have an FMP developer account which you can
easily create using the link here.

Obtaining Data using FMP

In this section, we will use the stock historical data
endpoint provided by FMP to attain Apple’s price history.
This can be easily done by using the following code:

api_key = 'YOUR API KEY'

hist_json =
requests.get(f'https://financialmodelingprep.com/api/v3/historical-price-
full/AAPL?apikey={api_key}').json()

hist_df = pd.DataFrame(hist_json['historical']).drop('label', axis = 1)

hist_df = hist_df.iloc[::-1].reset_index().drop(['index','adjClose'], axis
= 1)
hist_df.date = pd.to_datetime(hist_df.date)
hist_df = hist_df.iloc[:,:6].iloc[-365:]
hist_df.columns = ['time', 'open', 'high', 'low', 'close', 'volume']

hist_df.tail()

In the above code, we are first storing the secret API key in
a variable (remember to replace YOUR API KEY with your
actual secret key), and then, using the get provided by the
Requests package, we are extracting the historical data of
Apple. We are then converting the JSON response into a
Pandas dataframe, and after performing some data
manipulation, this is the final output:
Image by Author

In the code, the reason for changing the column names is

that lightweight_charts demands a specific naming structure
to plot the data. Now that we are having adequate data to
work with, let’s make some cool visualizations.

TradingView Charts
In this section, we are going to dive deep into
the lightweight_charts module and explore the exciting
possibilities. Let’s start off with a basic graph in the style
of TradingView. Here’s the code to generate a
TradingView graph using the library:

chart = Chart()
chart.set(hist_df)
chart.show(block = False)

It just takes as less as three lines of code for creating a

graph in the look of TradingView’s charting platform. And
the code is very straightforward in nature. We are first
creating an instance of the class Chart and assigned it to
the chart variable. Then using the set function, we are
setting the data of the chart. Finally, we are displaying the
created chart with the help of the show function. This is the
resulting graph of the code:

A basic TradingView-style replication

This output is absolutely stunning for a program of three

lines of code. But people who are disappointed at the
output after viewing the thumbnail of this article, don't
worry! Because now, we are going to up the game by
customizing the whole theme of the plot, adding more
details, and simply, making it even more beautiful. Here’s
the code to do that:

chart = Chart()

chart.grid(vert_enabled = True, horz_enabled = True)

chart.layout(background_color='#131722', font_family='Trebuchet MS',
font_size = 16)

chart.candle_style(up_color='#2962ff', down_color='#e91e63',
border_up_color='#2962ffcb',
border_down_color='#e91e63cb',
wick_up_color='#2962ffcb', wick_down_color='#e91e63cb')

chart.volume_config(up_color='#2962ffcb', down_color='#e91e63cb')

chart.title('AAPL')
chart.legend(visible = True, font_family = 'Trebuchet MS', ohlc = True,
percent = True)

##########################################################################
###########

chart.set(hist_df)

sma20_line = chart.create_line(color = '#ffeb3b', width = 1, price_label =

True)
sma20 = pd.DataFrame(columns = ['time', 'value'])
sma20.time = hist_df.time
sma20.value = hist_df.close.rolling(window = 20).mean()
sma20_line.title('SMA 20')
sma20_line.set(sma20.dropna(), name = 'value')

sma50_line = chart.create_line(color = '#26c6da', width = 1, price_label =

True)
sma50 = pd.DataFrame(columns = ['time', 'value'])
sma50.time = hist_df.time
sma50.value = hist_df.close.rolling(window = 50).mean()
sma50_line.title('SMA 50')
sma50_line.set(sma50.dropna(), name = 'value')

chart.show(block = False)

The code might not be as shorter as the previous one for

the basic plot, but it’s actually very simple. And for easy
explanation, I’ve divided the code into two separate parts.
The first part is about theme customization. It includes
changing the background color, the colors of the candles
and volume bars, and so on. Basically, the things related to
the style of the plot are dealt with in the first part. The
second part is about adding details to the plot. The details
we are adding here are the SMA 20 and SMA 50 lines.
Here’s the final output:

An advanced TradingView-style replication

This is absolutely fantastic! We fully customized the whole

look and feel of the plot and added more details like SMA
lines and legends for a more insightful graph.

Now let’s move our focus from historical graphs to another

cool feature provided by the lightweight_charts library which
is the real-time charting feature. Real-time charts are
extremely useful for day traders to keep track of the latest
price movements and TradingView is most preferred for
such charts. Just like how we replicated the historical
charts of TradingView, let’s do the same thing for real-time
charts too. This is the code to create a real-time
TradingView chart:
rt_df1 = hist_df[:150]
rt_df2 = hist_df[150:]

rt_chart = Chart()
rt_chart.set(rt_df1)

rt_chart.show(block = False)

for i, series in rt_df2.iterrows():

rt_chart.update(series)
time.sleep(0.1)

In this code, we are not actually using the real-time data of

stock prices but rather simulating it using the previously
extracted historical data. But you can use actual real-time
data with the help of FMP’s real-time stock price data
endpoint. We are first splitting the historical data into two
separate dataframes. The first one is used as the initial
data for the plot and the second one is used as the real-
time data which is done by updating the data points of the
plot with the help of a for-loop. This is the final output:
A basic TradingView-style real-time chart

Pretty cool, right?! But like how there was a lot of scope
for improvements in the basic historical graph, this real-
time chart can also be improved and modified in a lot of
places. We can first change the theme of the plot and
similar to how we added SMA lines to the historical chart
for better insights, we can add more details for an
informative visualization. Here’s the code for the modified
or advanced version of the initial real-time chart:
hist_df['SMA9'] = hist_df.close.rolling(window = 9).mean()
hist_df['SMA12'] = hist_df.close.rolling(window = 12).mean()
hist_df = hist_df.dropna()

rt_df1 = hist_df[:25]
rt_df2 = hist_df[25:]

rt_chart = Chart()

rt_chart.grid(vert_enabled = True, horz_enabled = True)

rt_chart.layout(background_color='#131722', font_family='Trebuchet MS',

font_size = 16)

rt_chart.candle_style(up_color='#2962ff', down_color='#e91e63',
border_up_color='#2962ffcb',
border_down_color='#e91e63cb',
wick_up_color='#2962ffcb', wick_down_color='#e91e63cb')

rt_chart.volume_config(up_color='#2962ffcb', down_color='#e91e63cb')

rt_chart.legend(visible = True, font_family = 'Trebuchet MS', ohlc = True,

percent = True)
rt_chart.fit()

##########################################################################
###########

rt_chart.set(rt_df1)

sma9_line = rt_chart.create_line(color = '#ffeb3b')

sma9_line.set(rt_df1, name = 'SMA9')

sma12_line = rt_chart.create_line(color = '#26c6da')

sma12_line.set(rt_df1, name = 'SMA12')

rt_chart.show(block = False)

p_sma9, p_sma12 = rt_df1.iloc[-1]['SMA9'], rt_df1.iloc[-1]['SMA12']

for i, series in rt_df2.iterrows():

rt_chart.update(series)
sma9_series, sma12_series = series[['time','SMA9']],
series[['time','SMA12']]
sma9_series.index, sma12_series.index = ['time','value'],
['time','value']
sma9_line.update(sma9_series)
sma12_line.update(sma12_series)

c_sma9, c_sma12 = sma9_series['value'], sma12_series['value']

if p_sma9 < p_sma12 and c_sma9 > c_sma12:

rt_chart.marker(text = 'Buy Signal', position = 'below', shape =
'arrow_up', color = '#33de3d')
elif p_sma9 > p_sma12 and c_sma9 < c_sma12:
rt_chart.marker(text = 'Sell Signal', position = 'above', shape =
'arrow_down', color = '#f485fb')

p_sma9, p_sma12 = c_sma9, c_sma12

time.sleep(0.1)

The code can be a little overwhelming but I’ll try to break

down and simplify it. Like how we did with the advanced
historical graph, we are splitting the code into two
sections. The first section is about calculating the SMA
values and customizing the theme of the chart. The second
section is all about simulating real-time data and plotting
the data points using a for-loop. To up the game, we are
also plotting trading signals generated using a technical
strategy alongside real-time data.

In a nutshell, the style adopted in this code is the same as

we used in the historical graph and so are the details like
the SMA lines. But what we are additionally doing here is
that we are plotting the buy and sell signals generated by a
simple SMA crossover strategy in real time. And here’s the
final result:
An advanced TradingView-style real-time chart

This is freaking awesome! It’s a cool application in and of

itself. Speaking of applications, our charts are great but
they are not fully interactive and do not take any input
from the user. Now, let’s solve this problem with the help
of some amazing components provided
by lightweight_charts for interactivity. Here’s the code to
create an interactive graph:

def fetch_data(symbol):
api_key = 'YOUR API KEY'
hist_json =
requests.get(f'https://financialmodelingprep.com/api/v3/historical-price-
full/AAPL?apikey={api_key}').json()
hist_df = pd.DataFrame(hist_json['historical']).drop('label', axis =
1)
hist_df = hist_df.iloc[::-1].reset_index().drop(['index','adjClose'],
axis = 1)
hist_df.date = pd.to_datetime(hist_df.date)
hist_df = hist_df.iloc[:,:6].iloc[-365:]
hist_df.columns = ['time', 'open', 'high', 'low', 'close', 'volume']
return hist_df

class API:
def __init__(self):
self.chart = None

async def on_symbol_selection(self):

new_data = fetch_data(self.chart.topbar['symbol'].value)
if new_data.empty:
return
self.chart.set(new_data)

async def main():

api = API()

chart = Chart(api = api, topbar = True)

chart.legend(visible = True, font_family = 'Trebuchet MS')
chart.fit()

chart.topbar.switcher('symbol', api.on_symbol_selection, 'META',

'AAPL', 'AMZN', 'MSFT', 'GOOGL', default='AAPL')

df = fetch_data('AAPL')
chart.set(df)

await chart.show_async(block = True)

if __name__ == '__main__':
asyncio.run(main())

To be honest, there are quite some complex things

happening in this code like using asyncio for asynchronous
programming but the goal here is not to understand each
and every single line of code but to get a glimpse of the
interactive components provided by the module and how it
can be used to elevate our visualizations. This is the result
generated by the above code:
Interactive TradingView-style chart

This is just a very basic example of integrating interactive

components into our charts. There are still plenty of
options and components to significantly improve the whole
look and feel of the chart and it is highly recommended to
check them out.

Closing Notes
In this article, we explored an interesting library
called lightweight_charts which helps in creating financial
visualizations in the look of TradingView with as less code
as possible. We went from generating a basic historical
graph to real-time and interactive charts and during the
process, we experimented with different components
provided by the library.

It’s really great to see the scope of Python expanding day

by day. I was aware of the Lightweight chart API provided
by TradingView a while ago but I couldn’t actually use it
since it demanded coding knowledge in other languages.
But now, I was able to achieve a great-looking
TradingView chart in Python using just three lines of code.
Finally, a huge shoutout to FinancialModelingPrep for
creating such a great and reliable platform for accessing
various types of financial data ranging from fundamental
data to ESG and sentiment scores of securities. With that
being said, you’ve reached the end of the article. Hope you
learned something new.

Level Up Coding
Thanks for being a part of our community! Before you go:

 👏 Clap for the story and follow the author 👉

 📰 View more content in the Level Up Coding
publication

🔔 Follow us: Twitter | LinkedIn | Newsletter

🧠 AI Tools ⇒ Become an AI prompt engineer

Technology

Data Science

Python

Programming
Finance

350
5

Written by Nikhil Adithyan

2.9K Followers

·Writer for

Level Up Coding

Founder @BacktestZone (https://www.backtestzone.com/), a no-code backtesting platform |

Top Writer | Connect with me on LinkedIn: https://bit.ly/3yNuwCJ
Follow
More from Nikhil Adithyan and Level Up Coding
Nikhil Adithyan

in

DataDrivenInvestor

Stock Price Prediction with ChatGPT and Finazon

A fully AI-driven approach to predicting the stock prices

13 min read·May 26

384

12
Sanjay Priyadarshi

in

Level Up Coding

I Spent 30 Days Studying A Programmer Who Built a $230

Billion Company After Quitting His 9–5 —…
Steal This Programmer Blueprint
·13 min read·Aug 7

1.1K

10

Prathamesh Gadekar

in

Level Up Coding
Python Libraries for Lazy Data Scientists
Do you feel lethargic today? Use these five libraries to boost your productivity.

7 min read·Apr 8

1.1K

4
Nikhil Adithyan

in

Level Up Coding

A Step-By-Step Guide to Implementing the SuperTrend

Indicator in Python
Learn to build a powerful trading strategy with the SuperTrend indicator in python

26 min read·May 29, 2021

227

See all from Nikhil Adithyan

See all from Level Up Coding

Recommended from Medium

Prajjwal Chauhan

Stock Prediction and Forecasting Using LSTM(Long-Short-

Term-Memory)
In an ever-evolving world of finance, accurately predicting stock market movements
has long been an elusive goal for investors and traders…

6 min read·Jul 8

77
4

Constantin Picoron
How I ended up building a quantitative trading algorithm
without a data science degree
For the past 20 month or so, I’ve been building a quantitative trading algorithm in
Python by myself. It’s been quite a journey, and here…

6 min read·Mar 20

Lists

Coding & Development

11 stories·129 saves

Predictive Modeling w/ Python

20 stories·316 saves
ChatGPT
21 stories·125 saves

ChatGPT prompts
24 stories·303 saves
Rupe Dodkins

Full Control Options Backtesting on Historical Data (Without

Paying for Offline Options Data)
Welcome back! As you might remember from my last article, I introduced “Options
Backtest,” a new Python package that empowers us to perform…

5 min read·Jun 21
chatgpt-writer

Utilizing Volume-Weighted Average Price (VWAP) for Informed

Trading Strategies
In the dynamic world of financial markets, traders are continually seeking innovative
tools to gain a competitive edge and improve their…

3 min read·Jul 24

1
Michael May

Deep Learning and Stock Time Series Data

Using Univariate LSTM and CNN-LSTM models to predict stock prices

10 min read·Apr 23
3

martin vizzolini

in

Coinmonks
How to Beat the Stock Market with Maths: A Dual Strategy
Approach
Is it possible to discover a foolproof winning strategy? What if we could
simultaneously bet on red and black in a casino roulette while…

11 min read·Jul 27

See more recommendations

Help

Status

Writers

Blog

Careers

Privacy

Terms
About

Text to speech

Teams