How to add Matplotlib graph in Kivy?

Integrating Matplotlib graphs into Kivy applications helps developers create more informative and engaging user interfaces. Kivy is an open-source Python framework for developing mobile and desktop applications, while Matplotlib is a data visualization library for creating charts and graphs. This article explores how to add Matplotlib graphs in Kivy applications.

Prerequisites

Before starting, ensure you have Python installed on your system. We'll create a virtual environment and install the required packages.

Step 1: Setting Up the Environment

Create a Virtual Environment

First, update pip and create a virtual environment ?

python -m pip install --upgrade pip wheel setuptools virtualenv

Create a virtual environment named kivy_venv ?

python -m virtualenv kivy_venv

Activate the virtual environment ?

# Windows
kivy_venv\Scripts\activate

# Linux/Mac
source kivy_venv/bin/activate

Step 2: Install Required Packages

Install Matplotlib, Kivy, and Kivy Garden using pip ?

pip install matplotlib
pip install kivy
pip install kivy_garden

Install the matplotlib garden package ?

garden install matplotlib

Step 3: Basic Kivy App Structure

Create a basic Kivy application that will host our Matplotlib graph ?

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.garden.matplotlib.backend_kivyagg import FigureCanvasKivyAgg
import matplotlib.pyplot as plt

class GraphApp(App):
    def build(self):
        return BoxLayout()

GraphApp().run()

Step 4: Adding Matplotlib Graph

Now let's create a complete application with a Matplotlib graph embedded in the Kivy interface ?

Python File (main.py)

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.garden.matplotlib.backend_kivyagg import FigureCanvasKivyAgg
import matplotlib.pyplot as plt

class GraphWidget(BoxLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.orientation = 'vertical'
        
        # Create sample data
        x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        y = [2, 4, 1, 6, 8, 3, 7, 5, 9, 2]
        
        # Create matplotlib figure
        plt.figure(figsize=(8, 6))
        plt.plot(x, y, marker='o', linestyle='-', color='blue')
        plt.title('Sample Data Visualization')
        plt.xlabel('X Values')
        plt.ylabel('Y Values')
        plt.grid(True)
        
        # Add matplotlib canvas to Kivy
        canvas = FigureCanvasKivyAgg(plt.gcf())
        self.add_widget(canvas)
        
        # Add a button for interaction
        btn = Button(text='Refresh Graph', size_hint_y=0.1)
        btn.bind(on_press=self.refresh_graph)
        self.add_widget(btn)
    
    def refresh_graph(self, instance):
        # Clear current plot and create new data
        plt.clf()
        import random
        x = list(range(1, 11))
        y = [random.randint(1, 10) for _ in range(10)]
        
        plt.plot(x, y, marker='s', linestyle='--', color='red')
        plt.title('Updated Data Visualization')
        plt.xlabel('X Values')
        plt.ylabel('Y Values')
        plt.grid(True)
        
        # Update the canvas
        self.children[1].draw()

class GraphApp(App):
    def build(self):
        return GraphWidget()

GraphApp().run()

Step 5: Using KV File for Layout

For better separation of design and logic, create a KV file for the layout ?

KV File (graph.kv)

<GraphLayout>:
    orientation: 'vertical'
    
    BoxLayout:
        id: graph_box
        size_hint_y: 0.8
    
    BoxLayout:
        size_hint_y: 0.2
        orientation: 'horizontal'
        
        Button:
            text: 'Line Plot'
            on_press: root.create_line_plot()
        
        Button:
            text: 'Bar Chart'
            on_press: root.create_bar_chart()
        
        Button:
            text: 'Scatter Plot'
            on_press: root.create_scatter_plot()

Updated Python File (main.py)

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.garden.matplotlib.backend_kivyagg import FigureCanvasKivyAgg
import matplotlib.pyplot as plt
import random

class GraphLayout(BoxLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.create_line_plot()
    
    def clear_graph(self):
        self.ids.graph_box.clear_widgets()
    
    def create_line_plot(self):
        self.clear_graph()
        
        x = list(range(1, 11))
        y = [random.randint(1, 20) for _ in range(10)]
        
        plt.figure(figsize=(8, 6))
        plt.plot(x, y, marker='o', color='blue')
        plt.title('Line Plot')
        plt.xlabel('X Values')
        plt.ylabel('Y Values')
        plt.grid(True)
        
        canvas = FigureCanvasKivyAgg(plt.gcf())
        self.ids.graph_box.add_widget(canvas)
    
    def create_bar_chart(self):
        self.clear_graph()
        
        categories = ['A', 'B', 'C', 'D', 'E']
        values = [random.randint(5, 25) for _ in range(5)]
        
        plt.figure(figsize=(8, 6))
        plt.bar(categories, values, color='green')
        plt.title('Bar Chart')
        plt.xlabel('Categories')
        plt.ylabel('Values')
        
        canvas = FigureCanvasKivyAgg(plt.gcf())
        self.ids.graph_box.add_widget(canvas)
    
    def create_scatter_plot(self):
        self.clear_graph()
        
        x = [random.randint(1, 50) for _ in range(20)]
        y = [random.randint(1, 50) for _ in range(20)]
        
        plt.figure(figsize=(8, 6))
        plt.scatter(x, y, c='red', alpha=0.7)
        plt.title('Scatter Plot')
        plt.xlabel('X Values')
        plt.ylabel('Y Values')
        plt.grid(True)
        
        canvas = FigureCanvasKivyAgg(plt.gcf())
        self.ids.graph_box.add_widget(canvas)

class GraphApp(App):
    def build(self):
        return GraphLayout()

GraphApp().run()

Key Components

The integration relies on these essential components ?

• FigureCanvasKivyAgg Bridges Matplotlib figures with Kivy widgets
• plt.gcf() Gets the current figure from Matplotlib
• BoxLayout Organizes the interface layout
• .kv files Separate design from application logic

Running the Application

Save your files and run the application ?

python main.py

Common Issues and Solutions

• Import errors Ensure all packages are installed in the virtual environment
• Canvas not updating Call canvas.draw() after plot changes
• Memory issues Use plt.clf() to clear figures before creating new ones

Conclusion

Integrating Matplotlib graphs into Kivy applications creates powerful data visualization tools with interactive interfaces. The FigureCanvasKivyAgg widget seamlessly bridges Matplotlib's plotting capabilities with Kivy's mobile-friendly interface, enabling developers to create engaging data-driven applications.