Place Matplotlib Charts on a Tkinter GUI

In this short guide, you’ll see the steps to place matplotlib charts on a tkinter GUI.

More specifically, you’ll learn how to embed the following charts on your GUI:

Bar
Line
Scatter

Steps to place matplotlib charts on a tkinter GUI

Step 1: Prepare the datasets for the charts

Firstly, you’ll need to prepare the datasets for the charts.

For illustration purposes, let’s use the following 3 datasets for our charts:

Data for the Bar Chart

country	gdp_per_capita
A	45000
B	42000
C	52000
D	49000
E	47000

Data for the Line Chart

year	unemployment_rate
1920	9.8
1930	12
1940	8
1950	7.2
1960	6.9
1970	7
1980	6.5
1990	6.2
2000	5.5
2010	6.3

Data for the Scatter Diagram

interest_rate	index_price
5	1500
5.5	1520
6	1525
5.5	1523
5.25	1515
6.5	1540
7	1545
8	1560
7.5	1555
8.5	1565

Step 2: Create the DataFrames in Python

Next, capture the above data using the following DataFrames:

import pandas as pd

data1 = {
    "country": ["A", "B", "C", "D", "E"],
    "gdp_per_capita": [45000, 42000, 52000, 49000, 47000],
}
df1 = pd.DataFrame(data1)
print(df1)

data2 = {
    "year": [1920, 1930, 1940, 1950, 1960, 1970, 1980, 1990, 2000, 2010],
    "unemployment_rate": [9.8, 12, 8, 7.2, 6.9, 7, 6.5, 6.2, 5.5, 6.3],
}
df2 = pd.DataFrame(data2)
print(df2)

data3 = {
    "interest_rate": [5, 5.5, 6, 5.5, 5.25, 6.5, 7, 8, 7.5, 8.5],
    "index_price": [1500, 1520, 1525, 1523, 1515, 1540, 1545, 1560, 1555, 1565],
}
df3 = pd.DataFrame(data3)
print(df3)

Run the above code, and you’ll get the following 3 DataFrames:

  country  gdp_per_capita
0       A           45000
1       B           42000
2       C           52000
3       D           49000
4       E           47000
   year  unemployment_rate
0  1920                9.8
1  1930               12.0
2  1940                8.0
3  1950                7.2
4  1960                6.9
5  1970                7.0
6  1980                6.5
7  1990                6.2
8  2000                5.5
9  2010                6.3
   interest_rate  index_price
0           5.00         1500
1           5.50         1520
2           6.00         1525
3           5.50         1523
4           5.25         1515
5           6.50         1540
6           7.00         1545
7           8.00         1560
8           7.50         1555
9           8.50         1565

Step 3: Create the GUI

Next, you’ll need to create the tkinter GUI, so that you can place the charts on it.

To begin, you’ll need to import the tkinter and matplotlib modules as follows:

import tkinter as tk
import matplotlib.pyplot as plt
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg

Then, add the charts on the GUI by using this generic template:

figure = plt.Figure(figsize=(6, 5), dpi=100)
ax = figure.add_subplot(111)
chart_type = FigureCanvasTkAgg(figure, root)
chart_type.get_tk_widget().pack()
df = df[["First Column", "Second Column"]].groupby("First Column").sum()
df.plot(kind="Chart Type", legend=True, ax=ax)
ax.set_title("The Title for your chart")

Slight variations may be applied to the above template, depending on the chart that you need to plot.

Putting everything together, your full Python code would look like this:

import tkinter as tk
import pandas as pd
import matplotlib.pyplot as plt
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg

data1 = {
    "country": ["A", "B", "C", "D", "E"],
    "gdp_per_capita": [45000, 42000, 52000, 49000, 47000],
}
df1 = pd.DataFrame(data1)

data2 = {
    "year": [1920, 1930, 1940, 1950, 1960, 1970, 1980, 1990, 2000, 2010],
    "unemployment_rate": [9.8, 12, 8, 7.2, 6.9, 7, 6.5, 6.2, 5.5, 6.3],
}
df2 = pd.DataFrame(data2)

data3 = {
    "interest_rate": [5, 5.5, 6, 5.5, 5.25, 6.5, 7, 8, 7.5, 8.5],
    "index_price": [1500, 1520, 1525, 1523, 1515, 1540, 1545, 1560, 1555, 1565],
}
df3 = pd.DataFrame(data3)

root = tk.Tk()

figure1 = plt.Figure(figsize=(6, 5), dpi=100)
ax1 = figure1.add_subplot(111)
bar1 = FigureCanvasTkAgg(figure1, root)
bar1.get_tk_widget().pack(side=tk.LEFT, fill=tk.BOTH)
df1 = df1[["country", "gdp_per_capita"]].groupby("country").sum()
df1.plot(kind="bar", legend=True, ax=ax1)
ax1.set_title("Country Vs. GDP Per Capita")

figure2 = plt.Figure(figsize=(5, 4), dpi=100)
ax2 = figure2.add_subplot(111)
line2 = FigureCanvasTkAgg(figure2, root)
line2.get_tk_widget().pack(side=tk.LEFT, fill=tk.BOTH)
df2 = df2[["year", "unemployment_rate"]].groupby("year").sum()
df2.plot(kind="line", legend=True, ax=ax2, color="r", marker="o", fontsize=10)
ax2.set_title("Year Vs. Unemployment Rate")

figure3 = plt.Figure(figsize=(5, 4), dpi=100)
ax3 = figure3.add_subplot(111)
ax3.scatter(df3["interest_rate"], df3["index_price"], color="g")
scatter3 = FigureCanvasTkAgg(figure3, root)
scatter3.get_tk_widget().pack(side=tk.LEFT, fill=tk.BOTH)
ax3.legend(["index_price"])
ax3.set_xlabel("Interest Rate")
ax3.set_title("Interest Rate Vs. Index Price")

root.mainloop()

Run the above Python code, and you’ll see the matplotlib charts placed on the GUI.

For additional information about the tkinter module, you may check the tkinter documentation.