Create Scatter Charts in Matplotlib using Flask

Last Updated : 28 Apr, 2025

In this article, we will see how to create charts in Matplotlib with Flask. We will discuss two different ways how we can create Matplotlib charts in Flask and present it on an HTML webpage with or without saving the plot using Python.

File structure

Create and Save the Plot in the Static Directory

Here, We first created a get_plot() function which generates the Matplotlib plot and returns the plot object. Python's Numpy library generates random data for this plot. It is not necessary to import if you are defining your own data. The root URL ('/') first calls this function to get the plot object. It then saves this plot object as 'plot.png' under the images folder present inside the static directory. This is the default location defined by Flask for static files like images, CSS, JS, etc. The final step is to render the below HTML script which reads the image file from the directory and renders it to the web browser as shown in the output image.

Python3

# Importing required functions  import numpy as np import matplotlib.pyplot as plt from flask import Flask, render_template   # Flask constructor  app = Flask(__name__)  # Generate a scatter plot and returns the figure def get_plot():     data = {         'a': np.arange(50),         'c': np.random.randint(0, 50, 50),         'd': np.random.randn(50)     }     data['b'] = data['a'] + 10 * np.random.randn(50)     data['d'] = np.abs(data['d']) * 100      plt.scatter('a', 'b', c='c', s='d', data=data)     plt.xlabel('X label')     plt.ylabel('Y label')     return plt  # Root URL @app.get('/') def single_converter():     # Get the matplotlib plot      plot = get_plot()      # Save the figure in the static directory      plot.savefig(os.path.join('static', 'images', 'plot.png'))      return render_template('matplotlib-plot1.html')  # Main Driver Function  if __name__ == '__main__':     # Run the application on the local development server      app.run(debug=True)

Save the HTML file as 'matplotlib-plot1.html' under the templates folder in the root directory.

HTML

<!DOCTYPE html> <html lang="en">  <head>     <title>Matplotlib Plot</title> </head>  <body>     <h1>How to Create Charts in Matplotlib with flask - Example 1</h1>     <img src="{{ url_for('static', filename='images/plot.png') }}"> </body>  </html>

Output:

Generating a Base64 I/O String of the Plot

We will generate the base64 I/O) string format for the image and pass this to the template to render the plot. Here, We first created a get_plot() function which generates the Matplotlib plot and returns the plot object. Python's Numpy library generates random data for this plot. It is not necessary to import if you are defining your own data. The root URL ('/') first calls this function to get the plot object. It then creates a Base64 I/O equivalent format of the string using python's built-in 'io' and 'base64' modules. The final step is to render the below HTML script and also pass this string to the template. The template reads the image file using the string that is passed to it.

Python

# Importing required functions from flask import Flask, render_template import matplotlib.pyplot as plt import os import numpy as np import matplotlib matplotlib.use('Agg')   # Flask constructor app = Flask(__name__)  # Generate a scatter plot and returns the figure def get_plot():      data = {         'a': np.arange(50),         'c': np.random.randint(0, 50, 50),         'd': np.random.randn(50)     }      data['b'] = data['a'] + 10 * np.random.randn(50)     data['d'] = np.abs(data['d']) * 100      plt.scatter('a', 'b', c='c', s='d', data=data)     plt.xlabel('X label')     plt.ylabel('Y label')      return plt  # Root URL @app.get('/') def single_converter():     # Get the matplotlib plot     plot = get_plot()      # Save the figure in the static directory     plot.savefig(os.path.join('static', 'images', 'plot.png'))      # Close the figure to avoid overwriting     plot.close()     return render_template('matplotlib-plot1.html')  # Main Driver Function if __name__ == '__main__':     # Run the application on the local development server     app.run(debug=True)

Save the HTML file as 'matplotlib-plot2.html' under the templates folder in the root directory.

HTML

<!DOCTYPE html> <html lang="en">  <head>     <title>Matplotlib Plot</title> </head>  <body>     <h1>How to Create Charts in Matplotlib with flask - Example 2</h1>     <img src="data:image/png;base64,{{ s }}"> </body>  </html>