How to Create a GUI in Python using Tkinter

In this short tutorial, you’ll see how to create a tkinter GUI with the following components:

Canvas screen, where you can place items, such as labels and buttons
Labels to display text on top of the Canvas
Entry Boxes to allow users type values
Function to display a Bar and Pie charts
Button to trigger the function

Create a GUI in Python using tkinter

To start, here is the complete code to create the tkinter GUI. Later, you’ll see an explanation of the main components of the code.

You’ll need to ensure that the Matplotlib package is installed in Python. This package is used to display the charts (i.e., the bar and the pie charts).

import tkinter as tk
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
from matplotlib.figure import Figure

root = tk.Tk()
root.geometry("900x500")

canvas = tk.Canvas(root, width=800, height=300)
canvas.pack()

label1 = tk.Label(root, text="Graphical User Interface")
label1.config(font=("Arial", 20))
canvas.create_window(400, 50, window=label1)

entry1 = tk.Entry(root)
canvas.create_window(400, 90, window=entry1)

entry2 = tk.Entry(root)
canvas.create_window(400, 110, window=entry2)

entry3 = tk.Entry(root)
canvas.create_window(400, 130, window=entry3)


def create_charts():
    x1 = float(entry1.get())
    x2 = float(entry2.get())
    x3 = float(entry3.get())

    figure1 = Figure(figsize=(4, 3), dpi=100)
    subplot1 = figure1.add_subplot(111)
    x_axis = [float(x1), float(x2), float(x3)]
    y_axis = [float(x1), float(x2), float(x3)]
    subplot1.bar(x_axis, y_axis, color="lightsteelblue")
    bar1 = FigureCanvasTkAgg(figure1, root)
    bar1.get_tk_widget().place(x=50, y=180)

    figure2 = Figure(figsize=(4, 3), dpi=100)
    subplot2 = figure2.add_subplot(111)
    labels2 = "Label1", "Label2", "Label3"
    pie_sizes = [float(x1), float(x2), float(x3)]
    my_colors2 = ["lightblue", "lightsteelblue", "silver"]
    explode2 = (0, 0.1, 0)
    subplot2.pie(
        pie_sizes,
        colors=my_colors2,
        explode=explode2,
        labels=labels2,
        autopct="%1.1f%%",
        shadow=True,
        startangle=90,
    )
    subplot2.axis("equal")
    pie2 = FigureCanvasTkAgg(figure2, root)
    pie2.get_tk_widget().place(x=450, y=180)


button1 = tk.Button(
    root,
    text=" Create Charts ",
    command=create_charts,
    bg="palegreen2",
    font=("Arial", 11, "bold"),
)
canvas.create_window(400, 162, window=button1)

root.mainloop()

Let’s now dive into the main components of the Python code:

The Canvas

The Canvas is your GUI screen where you can place items, such as buttons, labels, entry boxes and more. You can control the dimensions of the Canvas by changing the width and height values:

canvas = tk.Canvas(root, width=800, height=300)
canvas.pack()

The Labels

Labels can be used to print text on top of the Canvas. For our example, a label was added to display the following text:

‘Graphical User Interface’

You may specify a different font-family and font-size for your labels. In our case, the font family is ‘Arial’ and the font size is ’20.’

Finally, you can control the position of the label by modifying the coordinates on the last row below (for our example, the coordinates are 400 and 50):

label1 = tk.Label(root, text="Graphical User Interface")
label1.config(font=("Arial", 20))
canvas.create_window(400, 50, window=label1)

The Entry Boxes

The 3 entry boxes are used to collect information from the user. That information will then be used to create the Matplotlib charts.

As before, you can control the position of the entry boxes by specifying the coordinates:

entry1 = tk.Entry(root)
canvas.create_window(400, 90, window=entry1)

entry2 = tk.Entry(root)
canvas.create_window(400, 110, window=entry2)

entry3 = tk.Entry(root)
canvas.create_window(400, 130, window=entry3)

The Function

The ‘create_charts‘ function will be called when the user clicks on the first button (i.e., ‘button1’) to draw the charts.

The information collected in the entry boxes, will then be used to depict the bar and pie charts. Here is a full guide that explains how to place charts on a tkinter GUI.

def create_charts():
    x1 = float(entry1.get())
    x2 = float(entry2.get())
    x3 = float(entry3.get())

    figure1 = Figure(figsize=(4, 3), dpi=100)
    subplot1 = figure1.add_subplot(111)
    x_axis = [float(x1), float(x2), float(x3)]
    y_axis = [float(x1), float(x2), float(x3)]
    subplot1.bar(x_axis, y_axis, color="lightsteelblue")
    bar1 = FigureCanvasTkAgg(figure1, root)
    bar1.get_tk_widget().place(x=50, y=180)

    figure2 = Figure(figsize=(4, 3), dpi=100)
    subplot2 = figure2.add_subplot(111)
    labels2 = "Label1", "Label2", "Label3"
    pie_sizes = [float(x1), float(x2), float(x3)]
    my_colors2 = ["lightblue", "lightsteelblue", "silver"]
    explode2 = (0, 0.1, 0)
    subplot2.pie(
        pie_sizes,
        colors=my_colors2,
        explode=explode2,
        labels=labels2,
        autopct="%1.1f%%",
        shadow=True,
        startangle=90,
    )
    subplot2.axis("equal")
    pie2 = FigureCanvasTkAgg(figure2, root)
    pie2.get_tk_widget().place(x=450, y=180)

The Button

The button (i.e., ‘button1’) can be used to trigger the ‘create_charts‘ function in order to draw the charts.

You can position the button on the Canvas by specifying the coordinates (in our case, the coordinates are 400 and 162):

button1 = tk.Button(
    root,
    text=" Create Charts ",
    command=create_charts,
    bg="palegreen2",
    font=("Arial", 11, "bold"),
)
canvas.create_window(400, 162, window=button1)

Launch the tkinter GUI

Once you’re ready, run the complete code in Python, and you’ll get the tkinter GUI.

Type a value within each of the input boxes. For example, type the values of 4, 5 and 6 in the input boxes, and then click on the “Create Charts” button.

You’ll then see the two charts at the bottom section of your screen (based on the 3 values that you typed):

On the left side, you’ll see the bar chart
On the right side, you’ll observe the pie chart (representing your values in % terms)

Additional Resources – Tkinter GUI

The following guide further explains how to place charts on a tkinter GUI
You may also want to check how to add message boxes to your GUI
Finally, you may refer to the tkinter documentation to find out more about tkinter