tessl/pypi-flet

Flet is a rich User Interface framework to quickly build interactive web, desktop and mobile apps in Python without prior knowledge of web technologies.

—

Pending

Overview

Eval results

Files

Charts and Visualization

Name: tessl/pypi-flet
Author: tessl

This document covers Flet's data visualization capabilities, including built-in charts and third-party integrations for creating interactive and beautiful data visualizations.

Import

import flet as ft

Built-in Chart Controls

BarChart

class BarChart(Control):
    """Bar chart visualization control."""
    
    def __init__(
        self,
        bar_groups: List[BarChartGroup] = None,
        baseline: float = None,
        border_data: ChartBorderData = None,
        grid_data: ChartGridData = None,
        left_axis: ChartAxis = None,
        top_axis: ChartAxis = None,
        right_axis: ChartAxis = None,
        bottom_axis: ChartAxis = None,
        horizontal_grid_lines: ChartGridLines = None,
        vertical_grid_lines: ChartGridLines = None,
        bgcolor: str = None,
        tooltip_bgcolor: str = None,
        max_y: float = None,
        min_y: float = None,
        interactive: bool = True,
        expand: bool = None,
        **kwargs
    )

Parameters:

bar_groups (List[BarChartGroup], optional): Groups of bars to display
baseline (float, optional): Y-axis baseline value
border_data (ChartBorderData, optional): Chart border styling
left_axis (ChartAxis, optional): Left Y-axis configuration
bottom_axis (ChartAxis, optional): Bottom X-axis configuration
max_y (float, optional): Maximum Y-axis value
min_y (float, optional): Minimum Y-axis value
interactive (bool, optional): Enable hover and interaction

Example:

ft.BarChart(
    bar_groups=[
        ft.BarChartGroup(
            x=0,
            bar_rods=[
                ft.BarChartRod(
                    from_y=0,
                    to_y=40,
                    width=40,
                    color=ft.colors.AMBER,
                    tooltip="January: 40"
                )
            ]
        ),
        ft.BarChartGroup(
            x=1,
            bar_rods=[
                ft.BarChartRod(
                    from_y=0,
                    to_y=100,
                    width=40,
                    color=ft.colors.BLUE,
                    tooltip="February: 100"
                )
            ]
        )
    ],
    left_axis=ft.ChartAxis(
        labels_size=40,
        title=ft.Text("Sales"),
        title_size=40
    ),
    bottom_axis=ft.ChartAxis(
        labels=[
            ft.ChartAxisLabel(value=0, label=ft.Text("Jan")),
            ft.ChartAxisLabel(value=1, label=ft.Text("Feb"))
        ],
        labels_size=40
    ),
    horizontal_grid_lines=ft.ChartGridLines(
        color=ft.colors.GREY_300,
        width=1,
        dash_pattern=[3, 3]
    )
)

BarChartGroup

class BarChartGroup(Control):
    """Group of bars in a bar chart."""
    
    def __init__(
        self,
        x: float,
        bar_rods: List[BarChartRod] = None,
        barsSpace: float = None,
        show_tooltip: bool = True,
        **kwargs
    )

Parameters:

x (float): X-axis position for this group
bar_rods (List[BarChartRod], optional): Individual bars in this group
barsSpace (float, optional): Space between bars in group
show_tooltip (bool, optional): Show tooltip on hover

BarChartRod

class BarChartRod(Control):
    """Individual bar in a bar chart."""
    
    def __init__(
        self,
        from_y: float,
        to_y: float,
        width: float = None,
        color: str = None,
        border_radius: BorderRadiusValue = None,
        border_side: BorderSide = None,
        gradient: Gradient = None,
        rod_stack_items: List[BarChartRodStackItem] = None,
        show_tooltip: bool = True,
        tooltip: str = None,
        **kwargs
    )

Parameters:

from_y (float): Starting Y value (usually 0)
to_y (float): Ending Y value (bar height)
width (float, optional): Bar width
color (str, optional): Bar color
border_radius (BorderRadiusValue, optional): Rounded corners
gradient (Gradient, optional): Gradient fill
rod_stack_items (List[BarChartRodStackItem], optional): Stacked segments
tooltip (str, optional): Custom tooltip text

LineChart

class LineChart(Control):
    """Line chart visualization control."""
    
    def __init__(
        self,
        data_series: List[LineChartData] = None,
        border_data: ChartBorderData = None,
        grid_data: ChartGridData = None,
        left_axis: ChartAxis = None,
        top_axis: ChartAxis = None,
        right_axis: ChartAxis = None,
        bottom_axis: ChartAxis = None,
        horizontal_grid_lines: ChartGridLines = None,
        vertical_grid_lines: ChartGridLines = None,
        bgcolor: str = None,
        tooltip_bgcolor: str = None,
        max_x: float = None,
        max_y: float = None,
        min_x: float = None,
        min_y: float = None,
        interactive: bool = True,
        point_line_start: ChartPointLine = None,
        point_line_end: ChartPointLine = None,
        expand: bool = None,
        **kwargs
    )

Parameters:

data_series (List[LineChartData], optional): Line data series
max_x (float, optional): Maximum X-axis value
max_y (float, optional): Maximum Y-axis value
min_x (float, optional): Minimum X-axis value
min_y (float, optional): Minimum Y-axis value
interactive (bool, optional): Enable hover and interaction

Example:

ft.LineChart(
    data_series=[
        ft.LineChartData(
            data_points=[
                ft.LineChartDataPoint(1, 1),
                ft.LineChartDataPoint(3, 1.5),
                ft.LineChartDataPoint(5, 1.4),
                ft.LineChartDataPoint(7, 3.4),
                ft.LineChartDataPoint(10, 2),
                ft.LineChartDataPoint(12, 2.2),
                ft.LineChartDataPoint(13, 1.8)
            ],
            stroke_width=8,
            color=ft.colors.LIGHT_GREEN,
            curved=True,
            stroke_cap_round=True
        )
    ],
    border_data=ft.ChartBorderData(
        border=ft.Border(
            bottom=ft.BorderSide(4, ft.colors.with_opacity(0.5, ft.colors.ON_SURFACE))
        )
    ),
    left_axis=ft.ChartAxis(
        labels=[
            ft.ChartAxisLabel(
                value=1,
                label=ft.Container(ft.Text("1K"), padding=10)
            ),
            ft.ChartAxisLabel(
                value=2,
                label=ft.Container(ft.Text("2K"), padding=10)
            )
        ],
        labels_size=40
    ),
    bottom_axis=ft.ChartAxis(
        labels=[
            ft.ChartAxisLabel(
                value=2,
                label=ft.Container(ft.Text("MAR"), padding=10)
            ),
            ft.ChartAxisLabel(
                value=7,
                label=ft.Container(ft.Text("JUN"), padding=10)
            ),
            ft.ChartAxisLabel(
                value=12,
                label=ft.Container(ft.Text("SEP"), padding=10)
            )
        ],
        labels_size=32
    ),
    horizontal_grid_lines=ft.ChartGridLines(
        color=ft.colors.with_opacity(0.2, ft.colors.ON_SURFACE),
        width=1
    ),
    tooltip_bgcolor=ft.colors.with_opacity(0.8, ft.colors.BLUE_GREY),
    max_y=4,
    min_y=0,
    interactive=True
)

LineChartData

class LineChartData(Control):
    """Line data series for line chart."""
    
    def __init__(
        self,
        data_points: List[LineChartDataPoint] = None,
        stroke_width: float = 2,
        color: str = None,
        gradient: Gradient = None,
        curved: bool = False,
        stroke_cap_round: bool = False,
        prevent_curve_over_shooting: bool = False,
        is_stroke_cap_round: bool = None,
        dash_pattern: List[int] = None,
        shadow: BoxShadow = None,
        below_line: ChartAreaData = None,
        above_line: ChartAreaData = None,
        point: ChartPointShape = None,
        show_tooltip: bool = True,
        **kwargs
    )

Parameters:

data_points (List[LineChartDataPoint], optional): Points on the line
stroke_width (float, optional): Line thickness
color (str, optional): Line color
curved (bool, optional): Smooth curved line
dash_pattern (List[int], optional): Dash pattern for dashed lines
below_line (ChartAreaData, optional): Fill area below line
point (ChartPointShape, optional): Point markers on line

LineChartDataPoint

class LineChartDataPoint(Control):
    """Individual data point in line chart."""
    
    def __init__(
        self,
        x: float,
        y: float,
        tooltip: str = None,
        tooltip_style: TextStyle = None,
        selected_below_line: ChartAreaData = None,
        selected_point: ChartPointShape = None,
        show_above_line: bool = True,
        show_below_line: bool = True,
        show_tooltip: bool = True,
        **kwargs
    )

Parameters:

x (float): X-axis coordinate
y (float): Y-axis coordinate
tooltip (str, optional): Custom tooltip text
show_tooltip (bool, optional): Show tooltip on hover

PieChart

class PieChart(Control):
    """Pie chart visualization control."""
    
    def __init__(
        self,
        sections: List[PieChartSection] = None,
        sections_space: float = 2,
        start_degree_offset: float = 0,
        center_space_radius: float = None,
        center_space_color: str = None,
        center_space_child: Control = None,
        expand: bool = None,
        **kwargs
    )

Parameters:

sections (List[PieChartSection], optional): Pie chart sections
sections_space (float, optional): Space between sections
start_degree_offset (float, optional): Starting angle offset
center_space_radius (float, optional): Center hole radius (donut chart)
center_space_child (Control, optional): Widget in center hole

Example:

ft.PieChart(
    sections=[
        ft.PieChartSection(
            value=25,
            color=ft.colors.BLUE,
            radius=50,
            title="25%",
            title_style=ft.TextStyle(
                size=16, color=ft.colors.WHITE, weight=ft.FontWeight.BOLD
            )
        ),
        ft.PieChartSection(
            value=25,
            color=ft.colors.YELLOW,
            radius=45,
            title="25%"
        ),
        ft.PieChartSection(
            value=25,
            color=ft.colors.PURPLE,
            radius=45,
            title="25%"
        ),
        ft.PieChartSection(
            value=25,
            color=ft.colors.GREEN,
            radius=45,
            title="25%"
        )
    ],
    sections_space=0,
    center_space_radius=0,
    expand=True
)

PieChartSection

class PieChartSection(Control):
    """Section of a pie chart."""
    
    def __init__(
        self,
        value: float,
        color: str = None,
        radius: float = None,
        title: str = None,
        title_style: TextStyle = None,
        title_position_percentage_offset: float = None,
        badge: Control = None,
        badge_position_percentage_offset: float = None,
        gradient: Gradient = None,
        border_side: BorderSide = None,
        **kwargs
    )

Parameters:

value (float): Section value/percentage
color (str, optional): Section color
radius (float, optional): Section radius
title (str, optional): Section title text
title_style (TextStyle, optional): Title styling
badge (Control, optional): Custom badge widget
gradient (Gradient, optional): Gradient fill

Chart Components and Styling

ChartAxis

class ChartAxis(Control):
    """Chart axis configuration."""
    
    def __init__(
        self,
        labels: List[ChartAxisLabel] = None,
        labels_size: float = None,
        labels_interval: float = None,
        title: Control = None,
        title_size: float = None,
        show_labels: bool = True,
        labels_text_style: TextStyle = None,
        **kwargs
    )

Parameters:

labels (List[ChartAxisLabel], optional): Custom axis labels
labels_size (float, optional): Reserved space for labels
labels_interval (float, optional): Interval between labels
title (Control, optional): Axis title widget
show_labels (bool, optional): Whether to show labels

ChartAxisLabel

class ChartAxisLabel(Control):
    """Individual axis label."""
    
    def __init__(
        self,
        value: float,
        label: Control,
        **kwargs
    )

ChartGridLines

class ChartGridLines(Control):
    """Chart grid lines styling."""
    
    def __init__(
        self,
        color: str = None,
        width: float = None,
        dash_pattern: List[int] = None,
        interval: float = None,
        **kwargs
    )

Parameters:

color (str, optional): Grid line color
width (float, optional): Grid line width
dash_pattern (List[int], optional): Dash pattern for dashed lines
interval (float, optional): Interval between grid lines

ChartPointShape

class ChartPointShape(Control):
    """Base class for chart point shapes."""
    pass

class ChartCirclePoint(ChartPointShape):
    """Circular point marker."""
    
    def __init__(
        self,
        color: str = None,
        radius: float = None,
        stroke_color: str = None,
        stroke_width: float = None,
        **kwargs
    )

class ChartSquarePoint(ChartPointShape):
    """Square point marker."""
    
    def __init__(
        self,
        color: str = None,
        size: float = None,
        stroke_color: str = None,
        stroke_width: float = None,
        **kwargs
    )

class ChartCrossPoint(ChartPointShape):
    """Cross-shaped point marker."""
    
    def __init__(
        self,
        color: str = None,
        size: float = None,
        width: float = None,
        **kwargs
    )

Third-Party Chart Integration

MatplotlibChart

class MatplotlibChart(Control):
    """Matplotlib integration for advanced charting."""
    
    def __init__(
        self,
        figure: matplotlib.figure.Figure = None,
        original_size: bool = False,
        isolated: bool = False,
        **kwargs
    )

Parameters:

figure (matplotlib.figure.Figure, optional): Matplotlib figure object
original_size (bool, optional): Use original figure size
isolated (bool, optional): Isolate matplotlib backend

Example:

import matplotlib.pyplot as plt
import matplotlib
matplotlib.use("svg")  # Use SVG backend for Flet

fig, ax = plt.subplots()

fruits = ['apple', 'blueberry', 'cherry', 'orange']
counts = [40, 100, 30, 55]
bar_colors = ['tab:red', 'tab:blue', 'tab:orange', 'tab:orange']

ax.bar(fruits, counts, color=bar_colors)
ax.set_ylabel('fruit supply')
ax.set_title('Fruit supply by kind and color')

ft.MatplotlibChart(figure=fig, expand=True)

PlotlyChart

class PlotlyChart(Control):
    """Plotly integration for interactive charts."""
    
    def __init__(
        self,
        figure: plotly.graph_objects.Figure = None,
        original_size: bool = False,
        isolated: bool = False,
        **kwargs
    )

Parameters:

figure (plotly.graph_objects.Figure, optional): Plotly figure object
original_size (bool, optional): Use original figure size
isolated (bool, optional): Isolate plotly environment

Example:

import plotly.graph_objects as go

fig = go.Figure()
fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4],
    y=[10, 11, 12, 13],
    mode='markers+lines',
    name='Trace 1'
))
fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4],
    y=[14, 15, 16, 17],
    mode='markers+lines',
    name='Trace 2'
))

ft.PlotlyChart(figure=fig, expand=True)

Chart Examples and Patterns

Multi-Series Bar Chart

def create_multi_series_bar_chart():
    return ft.BarChart(
        bar_groups=[
            ft.BarChartGroup(
                x=0,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0, to_y=40, width=20, 
                        color=ft.colors.BLUE, tooltip="Q1: 40"
                    ),
                    ft.BarChartRod(
                        from_y=0, to_y=60, width=20,
                        color=ft.colors.RED, tooltip="Q2: 60"
                    )
                ],
                barsSpace=4
            ),
            ft.BarChartGroup(
                x=1,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0, to_y=50, width=20,
                        color=ft.colors.BLUE, tooltip="Q1: 50"
                    ),
                    ft.BarChartRod(
                        from_y=0, to_y=80, width=20,
                        color=ft.colors.RED, tooltip="Q2: 80"
                    )
                ],
                barsSpace=4
            )
        ],
        max_y=100
    )

Stacked Bar Chart

def create_stacked_bar_chart():
    return ft.BarChart(
        bar_groups=[
            ft.BarChartGroup(
                x=0,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0, to_y=100, width=40,
                        rod_stack_items=[
                            ft.BarChartRodStackItem(0, 30, ft.colors.RED),
                            ft.BarChartRodStackItem(30, 70, ft.colors.GREEN),
                            ft.BarChartRodStackItem(70, 100, ft.colors.BLUE)
                        ]
                    )
                ]
            )
        ]
    )

Multi-Line Chart

def create_multi_line_chart():
    return ft.LineChart(
        data_series=[
            ft.LineChartData(
                data_points=[
                    ft.LineChartDataPoint(0, 3),
                    ft.LineChartDataPoint(2.6, 2),
                    ft.LineChartDataPoint(4.9, 5),
                    ft.LineChartDataPoint(6.8, 2.5),
                    ft.LineChartDataPoint(8, 4),
                    ft.LineChartDataPoint(9.5, 3),
                    ft.LineChartDataPoint(11, 4)
                ],
                stroke_width=3,
                color=ft.colors.BLUE,
                curved=True
            ),
            ft.LineChartData(
                data_points=[
                    ft.LineChartDataPoint(0, 1),
                    ft.LineChartDataPoint(2.6, 1.5),
                    ft.LineChartDataPoint(4.9, 3),
                    ft.LineChartDataPoint(6.8, 3.1),
                    ft.LineChartDataPoint(8, 2.8),
                    ft.LineChartDataPoint(9.5, 2.5),
                    ft.LineChartDataPoint(11, 2.8)
                ],
                stroke_width=3,
                color=ft.colors.RED,
                curved=True
            )
        ],
        max_y=6,
        min_y=0
    )

Donut Chart with Center Content

def create_donut_chart():
    return ft.PieChart(
        sections=[
            ft.PieChartSection(40, ft.colors.BLUE, radius=80, title="40%"),
            ft.PieChartSection(30, ft.colors.RED, radius=80, title="30%"),
            ft.PieChartSection(20, ft.colors.GREEN, radius=80, title="20%"),
            ft.PieChartSection(10, ft.colors.YELLOW, radius=80, title="10%")
        ],
        center_space_radius=40,
        center_space_child=ft.Container(
            content=ft.Text("Total\n100%", text_align=ft.TextAlign.CENTER),
            alignment=ft.alignment.center
        )
    )

Interactive Chart with Events

def create_interactive_chart(page):
    def on_chart_event(e):
        page.add(ft.Text(f"Chart clicked: {e.data}"))
        page.update()
    
    return ft.LineChart(
        data_series=[
            ft.LineChartData(
                data_points=[
                    ft.LineChartDataPoint(1, 1, tooltip="Point 1: (1,1)"),
                    ft.LineChartDataPoint(3, 4, tooltip="Point 2: (3,4)"),
                    ft.LineChartDataPoint(5, 2, tooltip="Point 3: (5,2)")
                ],
                stroke_width=4,
                color=ft.colors.CYAN,
                point=ft.ChartCirclePoint(
                    radius=6,
                    color=ft.colors.CYAN,
                    stroke_color=ft.colors.BLUE,
                    stroke_width=2
                )
            )
        ],
        interactive=True,
        on_chart_event=on_chart_event
    )

Best Practices

Data Preparation

# Prepare data for charts
def prepare_chart_data(raw_data):
    # Convert data to chart format
    points = []
    for i, value in enumerate(raw_data):
        points.append(ft.LineChartDataPoint(i, value))
    return points

# Dynamic chart updates
def update_chart_data(chart, new_data):
    chart.data_series[0].data_points = prepare_chart_data(new_data)
    page.update()

Responsive Charts

# Responsive chart sizing
def create_responsive_chart():
    return ft.Container(
        content=ft.LineChart(
            # Chart configuration
        ),
        width=lambda: min(600, page.window_width * 0.9),
        height=400
    )

Chart Theming

# Consistent chart theming
class ChartTheme:
    PRIMARY_COLOR = ft.colors.BLUE
    SECONDARY_COLOR = ft.colors.RED
    GRID_COLOR = ft.colors.GREY_300
    BACKGROUND_COLOR = ft.colors.WHITE
    
    @staticmethod
    def get_default_line_style():
        return {
            'stroke_width': 3,
            'curved': True,
            'point': ft.ChartCirclePoint(radius=4)
        }

This covers Flet's comprehensive charting and visualization capabilities, enabling you to create professional, interactive data visualizations for any application needs.

Install with Tessl CLI