Vamos a crear una grafica de barra usando, flet y python, flet cuenta con funciones propias para hacer graficas por lo que no se necesita instalar nada.
Las graficas en flet funcionan con un componente BarChart que contiene dentro uno o mas componentes BarChartGroup y cada componente BarchartGroup se compone de elementos BarChartRod.
Los elementos BarChartRod tienen los valores de cada barra:
- Valor de inicio Y
- Valor de fin Y
- Ancho
- Color
- Tooltip
- Border Radius
Tambien se pueden cofigurar borde para el cuadro de la grafica.
Se puede configurar titulos y etiquetas, configurar si se va a expandir la grafica en toda la pantalla y activar si es interactiva, entre muchas mas configuraciones.
Codigo
A continuacion el codigo para hacer una grafica de barras con 5 barras.
import flet as ft
def main(page: ft.Page):
chart = ft.BarChart( # definimos el componente de la grafica de barras
bar_groups=[
ft.BarChartGroup(
x=0,
bar_rods=[
ft.BarChartRod( # elemento de la grafica
from_y=0, # valor inicial de la barra
to_y=145, # valor final o altura de la barra
width=60, # ancho de la barra
color=ft.colors.PURPLE, # color de la barra
tooltip="HTML", # tooltip de una barra
border_radius=0, # radio del borde, para borde redondeado
),
],
),
ft.BarChartGroup(
x=1,
bar_rods=[
ft.BarChartRod(
from_y=0,
to_y=115,
width=60,
color=ft.colors.YELLOW,
tooltip="PHP",
border_radius=0,
),
],
),
ft.BarChartGroup(
x=2,
bar_rods=[
ft.BarChartRod(
from_y=0,
to_y=35,
width=60,
color=ft.colors.BLUE,
tooltip="JAVASCRIPT",
border_radius=0,
),
],
),
ft.BarChartGroup(
x=3,
bar_rods=[
ft.BarChartRod( # elemento de grafica
from_y=0, # valor inicial
to_y=65, # valor de la barra
width=60, # ancho de la barra
color=ft.colors.RED, # color de la barra
tooltip="PYTHON", # tooltip de la barra
border_radius=0, # border radio de la barra , para redondear bordes
),
],
),
ft.BarChartGroup(
x=4,
bar_rods=[
ft.BarChartRod(
from_y=0,
to_y=25,
width=60,
color=ft.colors.PINK,
tooltip="JAVA",
border_radius=0,
),
],
),
],
# definimos un borde para la grafica
border=ft.border.all(2, ft.colors.GREY_400),
# definims un titulo para la grafica
left_axis=ft.ChartAxis(
labels_size=40, title=ft.Text("Fruit supply"), title_size=40
),
bottom_axis=ft.ChartAxis( # asignamos valor a las etiquetas en la parte de abajo de cada grafica
labels=[
ft.ChartAxisLabel(
value=0, label=ft.Container(ft.Text("HTML"), padding=5)
),
ft.ChartAxisLabel(
value=1, label=ft.Container(ft.Text("PHP"), padding=10)
),
ft.ChartAxisLabel(
value=2, label=ft.Container(ft.Text("JAVASCRIPT"), padding=10)
),
ft.ChartAxisLabel(
value=3, label=ft.Container(ft.Text("PYTHON"), padding=10)
),
ft.ChartAxisLabel(
value=4, label=ft.Container(ft.Text("JAVA"), padding=10)
),
],
labels_size=40,
),
horizontal_grid_lines=ft.ChartGridLines(
color=ft.colors.GREY_300, width=1, dash_pattern=[3, 3]
),
tooltip_bgcolor=ft.colors.with_opacity(0.5, ft.colors.GREY_300),
max_y=210, # es necesario asignar el maximo valor Y de la grafica
interactive=True, # debe ser interactiva para activar los tooltips
expand=True, # para expandir el componente a todo el cuadro de la app
)
page.add(chart)
ft.app(main)Guardamos el codigo como bar-chart-flet.py y para ejecutarlo usamos el comando:
py bar-chart-flet.pyEl resultado es el siguiente:

Y listo, si tienen dudas, no olviden escribir sus comentarios, tambien les invito a suscribirse a mi blog y a mi canal de youtube https://youtube.com/evilnapsis