Published on

Graphing Pretty Charts with Python Flask and Chartjs



I am a big sucker for Charts and Graphs, and today I found one awesome library called Chart.js, which we will use with Python Flask Web Framework, to graph our data.

As Bitcoin is doing so well, I decided to graph the monthly Bitcoin price from January up until now.



Install Flask:

pip install flask

Create the files and directories:

mkdir templates

We need the Chart.js library, but I will use the CDN version, in my html.

Creating the Flask App:

Our data that we want to graph will be hard-coded in our application, but there are many ways to make this more dynamic, in your

from flask import Flask, Markup, render_template

app = Flask(__name__)

labels = [
    'JAN', 'FEB', 'MAR', 'APR',
    'MAY', 'JUN', 'JUL', 'AUG',
    'SEP', 'OCT', 'NOV', 'DEC'

values = [
    967.67, 1190.89, 1079.75, 1349.19,
    2328.91, 2504.28, 2873.83, 4764.87,
    4349.29, 6458.30, 9907, 16297

colors = [
    "#F7464A", "#46BFBD", "#FDB45C", "#FEDCBA",
    "#ABCDEF", "#DDDDDD", "#ABCABC", "#4169E1",
    "#C71585", "#FF4500", "#FEDCBA", "#46BFBD"]

def bar():
    return render_template('bar_chart.html', title='Bitcoin Monthly Price in USD', max=17000, labels=bar_labels, values=bar_values)

def line():
    return render_template('line_chart.html', title='Bitcoin Monthly Price in USD', max=17000, labels=line_labels, values=line_values)

def pie():
    pie_labels = labels
    pie_values = values
    return render_template('pie_chart.html', title='Bitcoin Monthly Price in USD', max=17000, set=zip(values, labels, colors))

if __name__ == '__main__':'', port=8080)

Populating the HTML Static Content:

As we are using render_template we need to populate our html files in our templates/ directory. As you can see we have 3 different html files:

  • templates/bar_chart.html :
  • templates/line_chart.html:
  • templates/pie_chart.html:

Running our Application:

As you can see, we have 3 endpoints, each representing a different chart style:

  • /line
  • /bar
  • /pie

Let's start our flask application:


When we access our /line endpoint:

When we access our /bar endpoint:

When we access our /pie endpoint:


Thank You

Thanks for reading, feel free to check out my website, feel free to subscribe to my newsletter or follow me at @ruanbekker on Twitter.