BarChart
Bases: ConstrainedControl
Draws a bar chart.
animate_offset: AnimationValue | None = None
Setting control's animate_offset to either True, number or an instance of
animation.Animation class enables implicit animation of Control.offset property.
offset property is an instance of transform.Offset class which specifies
horizontal x and vertical y offset of a control scaled to control's size.
For example, an offset transform.Offset(-0.25, 0) will result in a horizontal
translation of one quarter the width of the control.
Offset animation is used for various sliding effects:
import flet as ft
def main(page: ft.Page):
c = ft.Container(
width=150,
height=150,
bgcolor="blue",
border_radius=10,
offset=ft.transform.Offset(-2, 0),
animate_offset=ft.animation.Animation(1000),
)
def animate(e):
c.offset = ft.transform.Offset(0, 0)
c.update()
page.add(
c,
ft.ElevatedButton("Reveal!", on_click=animate),
)
ft.run(main)
animate_opacity: AnimationValue | None = None
Setting control's animate_opacity to either True, number or an instance of
animation.Animation class enables implicit animation of Control.opacity
property.
import flet as ft
def main(page: ft.Page):
c = ft.Container(
width=150,
height=150,
bgcolor="blue",
border_radius=10,
animate_opacity=300,
)
def animate_opacity(e):
c.opacity = 0 if c.opacity == 1 else 1
c.update()
page.add(
c,
ft.ElevatedButton(
"Animate opacity",
on_click=animate_opacity,
),
)
ft.app(main)
animate_position: AnimationValue | None = None
Setting control's animate_position to either True, number or an instance of
animation.Animation class (see above) enables implicit animation of Control's
left, top, right and bottom properties.
Please note Control position works inside Stack control only.
import flet as ft
def main(page: ft.Page):
c1 = ft.Container(width=50, height=50, bgcolor="red", animate_position=1000)
c2 = ft.Container(
width=50, height=50, bgcolor="green", top=60, left=0, animate_position=500
)
c3 = ft.Container(
width=50, height=50, bgcolor="blue", top=120, left=0, animate_position=1000
)
def animate_container(e):
c1.top = 20
c1.left = 200
c2.top = 100
c2.left = 40
c3.top = 180
c3.left = 100
page.update()
page.add(
ft.Stack([c1, c2, c3], height=250),
ft.ElevatedButton("Animate!", on_click=animate_container),
)
ft.run(main)
animate_rotation: AnimationValue | None = None
Setting control's animate_rotation to either True, number or an instance of
animation.Animation class enables implicit animation of Control.rotate
property.
from math import pi
import flet as ft
def main(page: ft.Page):
c = ft.Container(
width=100,
height=70,
bgcolor="blue",
border_radius=5,
rotate=ft.transform.Rotate(0, alignment=ft.Alignment.CENTER),
animate_rotation=ft.animation.Animation(300, ft.AnimationCurve.BOUNCE_OUT),
)
def animate(e):
c.rotate.angle += pi / 2
page.update()
page.vertical_alignment = ft.MainAxisAlignment.CENTER
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
page.spacing = 30
page.add(
c,
ft.ElevatedButton("Animate!", on_click=animate),
)
ft.run(main)
animate_scale: AnimationValue | None = None
Setting control's animate_scale to either True, number or an instance of
animation.Animation class enables implicit animation of Control.scale
property.
import flet as ft
def main(page: ft.Page):
c = ft.Container(
width=100,
height=100,
bgcolor="blue",
border_radius=5,
scale=ft.transform.Scale(scale=1),
animate_scale=ft.animation.Animation(600, ft.AnimationCurve.BOUNCE_OUT),
)
def animate(e):
c.scale = 2
page.update()
page.vertical_alignment = ft.MainAxisAlignment.CENTER
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
page.spacing = 30
page.add(
c,
ft.ElevatedButton("Animate!", on_click=animate),
)
ft.run(main)
animation: AnimationValue = field(
default_factory=lambda: Animation(
duration=Duration(milliseconds=150), curve=LINEAR
)
)
Controls chart implicit animation.
Effective inside Stack only. The distance
that the child's bottom edge is inset from the bottom of the stack.
The appearance of the bottom axis, its title and labels.
col: ResponsiveNumber = 12
If a parent of the control is ResponsiveRow, col property is used to determine
how many virtual columns of a screen the control will span.
Can be a number or a dictionary configured to have a different value for specific
breakpoints, for example col={"sm": 6}. Breakpoints are named dimension ranges:
| Breakpoint | Dimension |
|---|---|
| xs | <576px |
| sm | ≥576px |
| md | ≥768px |
| lg | ≥992px |
| xl | ≥1200px |
| xxl | ≥1400px |
If col property is not specified, it spans the maximum number of columns (12).
disabled: bool = False
Every control has disabled property which is False by default - control and all
its children are enabled.
disabled property is mostly used with data entry controls like TextField,
Dropdown, Checkbox, buttons.
However, disabled could be set to a parent control and its value will be
propagated down to all children recursively.
For example, if you have a form with multiple entry controls you can disable them all together by disabling container:
When a child Control is placed into a Column
or a Row you can "expand" it to fill the
available space.
expand property could be a boolean value (True - expand control to fill all
available space) or an integer - an "expand factor" specifying how to divide a free
space with other expanded child controls.
For more information and examples about expand property see "Expanding children"
sections in Column or
Row.
Here is an example of expand being used in action for both Column
and Row:
import flet as ft
def main(page: ft.Page):
page.spacing = 0
page.padding = 0
page.add(
ft.Column(
controls=[
ft.Row(
[
ft.Card(
content=ft.Text("Card_1"),
color=ft.Colors.ORANGE_300,
expand=True,
height=page.height,
margin=0,
),
ft.Card(
content=ft.Text("Card_2"),
color=ft.Colors.GREEN_100,
expand=True,
height=page.height,
margin=0,
),
],
expand=True,
spacing=0,
),
],
expand=True,
spacing=0,
),
)
ft.app(main)
expand_loose: bool | None = None
Effective only if expand is True.
If expand_loose is True, the child control of a
Column or a Row
will be given the flexibility to expand to fill the available space in the main
axis (e.g., horizontally for a Row or vertically for a Column), but will not be
required to fill the available space.
The default value is False.
Here is the example of Containers placed in Rows with expand_loose = True:
import flet as ft
class Message(ft.Container):
def __init__(self, author, body):
super().__init__()
self.content = ft.Column(
controls=[
ft.Text(author, weight=ft.FontWeight.BOLD),
ft.Text(body),
],
)
self.border = ft.border.all(1, ft.Colors.BLACK)
self.border_radius = ft.border_radius.all(10)
self.bgcolor = ft.Colors.GREEN_200
self.padding = 10
self.expand = True
self.expand_loose = True
def main(page: ft.Page):
chat = ft.ListView(
padding=10,
spacing=10,
controls=[
ft.Row(
alignment=ft.MainAxisAlignment.START,
controls=[
Message(
author="John",
body="Hi, how are you?",
),
],
),
ft.Row(
alignment=ft.MainAxisAlignment.END,
controls=[
Message(
author="Jake",
body="Hi I am good thanks, how about you?",
),
],
),
ft.Row(
alignment=ft.MainAxisAlignment.START,
controls=[
Message(
author="John",
body="Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book.",
),
],
),
ft.Row(
alignment=ft.MainAxisAlignment.END,
controls=[
Message(
author="Jake",
body="Thank you!",
),
],
),
],
)
page.window.width = 393
page.window.height = 600
page.window.always_on_top = False
page.add(chat)
ft.run(main)
groups: list[BarChartGroup] = field(default_factory=list)
The list of BarChartGroups to draw.
horizontal_grid_lines: ChartGridLines | None = None
Controls drawing of chart's horizontal lines.
Effective inside Stack only. The distance
that the child's left edge is inset from the left of the stack.
The appearance of the left axis, its title and labels.
offset: OffsetValue | None = None
Applies a translation transformation before painting the control.
The translation is expressed as a transform.Offset scaled to the control's size.
For example, an Offset with a x of 0.25 will result in a horizontal
translation of one quarter the width of the control.
The following example displays container at 0, 0 top left corner of a stack as
transform applies -1 * 100, -1 * 100 (offset * control_size) horizontal and
vertical translations to the control:
on_animation_end: OptionalControlEventHandler[
ConstrainedControl
] = None
All controls with animate_* properties have on_animation_end event handler
which is called when animation complete and can be used to chain multiple
animations.
Event's object data field contains the name of animation:
opacityrotationscaleoffsetpositioncontainer
For example:
on_event: EventHandler[BarChartEvent] | None = None
Fires when a bar is hovered or clicked.
opacity: Number = 1.0
Defines the transparency of the control.
Value ranges from 0.0 (completely transparent) to 1.0 (completely opaque
without any transparency) and defaults to 1.0.
The page (of type Page or PageView) to which this control belongs to.
parent: BaseControl | None
The direct ancestor(parent) of this control.
It defaults to None and will only have a value when this control is mounted (added to the page tree).
The Page control (which is the root of the tree) is an exception - it always has parent=None.
Effective inside Stack only. The distance
that the child's right edge is inset from the right of the stack.
The appearance of the right axis, its title and labels.
rotate: RotateValue | None = None
Transforms control using a rotation around the center.
The value of rotate property could be one of the following types:
number- a rotation in clockwise radians. Full circle360°ismath.pi * 2radians,90°ispi / 2,45°ispi / 4, etc.transform.Rotate- allows to specify rotationangleas well asalignment- the location of rotation center.
For example:
scale: ScaleValue | None = None
Scale control along the 2D plane. Default scale factor is 1.0 - control is not
scaled. 0.5 - the control is twice smaller, 2.0 - the control is twice larger.
Different scale multipliers can be specified for x and y axis, but setting
Control.scale property to an instance of transform.Scale class.
Either scale or scale_x and scale_y could be specified, but not all of them,
for example:
Effective inside Stack only. The distance
that the child's top edge is inset from the top of the stack.
The appearance of the top axis, its title and labels.
vertical_grid_lines: ChartGridLines | None = None
Controls drawing of chart's vertical lines.
visible: bool = True
Every control has visible property which is True by default - control is
rendered on the page. Setting visible to False completely prevents control (and
all its children if any) from rendering on a page canvas. Hidden controls cannot be
focused or selected with a keyboard or mouse and they do not emit any events.
Examples#
Example 1#
import flet as ft
import flet_charts as fch
def main(page: ft.Page):
page.add(
fch.BarChart(
expand=True,
interactive=True,
max_y=110,
border=ft.Border.all(1, ft.Colors.GREY_400),
horizontal_grid_lines=fch.ChartGridLines(
color=ft.Colors.GREY_300, width=1, dash_pattern=[3, 3]
),
tooltip=fch.BarChartTooltip(
bgcolor=ft.Colors.with_opacity(0.5, ft.Colors.GREY_300),
border_radius=ft.BorderRadius.all(20),
),
left_axis=fch.ChartAxis(
label_size=40, title=ft.Text("Fruit supply"), title_size=40
),
right_axis=fch.ChartAxis(show_labels=False),
bottom_axis=fch.ChartAxis(
label_size=40,
labels=[
fch.ChartAxisLabel(
value=0, label=ft.Container(ft.Text("Apple"), padding=10)
),
fch.ChartAxisLabel(
value=1, label=ft.Container(ft.Text("Blueberry"), padding=10)
),
fch.ChartAxisLabel(
value=2, label=ft.Container(ft.Text("Cherry"), padding=10)
),
fch.ChartAxisLabel(
value=3, label=ft.Container(ft.Text("Orange"), padding=10)
),
],
),
groups=[
fch.BarChartGroup(
x=0,
rods=[
fch.BarChartRod(
from_y=0,
to_y=40,
width=40,
color=ft.Colors.GREEN,
border_radius=0,
),
],
),
fch.BarChartGroup(
x=1,
rods=[
fch.BarChartRod(
from_y=0,
to_y=100,
width=40,
color=ft.Colors.BLUE,
tooltip=fch.BarChartRodTooltip("Blueberry"),
border_radius=0,
),
],
),
fch.BarChartGroup(
x=2,
rods=[
fch.BarChartRod(
from_y=0,
to_y=30,
width=40,
color=ft.Colors.RED,
border_radius=0,
),
],
),
fch.BarChartGroup(
x=3,
rods=[
fch.BarChartRod(
from_y=0,
to_y=60,
width=40,
color=ft.Colors.ORANGE,
tooltip=fch.BarChartRodTooltip("Orange"),
border_radius=0,
),
],
),
],
)
)
ft.run(main)
Example 2#
import flet as ft
import flet_charts as fch
class CustomRod(fch.BarChartRod):
def __init__(self, y: float, hovered: bool = False):
super().__init__()
self.hovered = hovered
self.y = y
self.width = 22
self.color = ft.Colors.WHITE
self.bg_to_y = 20
self.bg_color = ft.Colors.GREEN_300
def before_update(self):
super().before_update()
self.to_y = self.y + 0.5 if self.hovered else self.y
self.color = ft.Colors.YELLOW if self.hovered else ft.Colors.WHITE
self.border_side = (
ft.BorderSide(width=1, color=ft.Colors.RED)
if self.hovered
else ft.BorderSide(width=1, color=ft.Colors.BLUE)
)
def main(page: ft.Page):
def on_chart_event(e: fch.BarChartEvent):
if e.type == fch.ChartEventType.POINTER_HOVER:
for group_index, group in enumerate(chart.groups):
for rod_index, rod in enumerate(group.rods):
rod.hovered = (
e.group_index == group_index and e.rod_index == rod_index
)
chart.update()
chart = fch.BarChart(
on_event=on_chart_event,
interactive=True,
groups=[
fch.BarChartGroup(x=0, rods=[CustomRod(5)]),
fch.BarChartGroup(x=1, rods=[CustomRod(6.5)]),
fch.BarChartGroup(x=2, rods=[CustomRod(15)]),
fch.BarChartGroup(x=3, rods=[CustomRod(7.5)]),
fch.BarChartGroup(x=4, rods=[CustomRod(9)]),
fch.BarChartGroup(x=5, rods=[CustomRod(11.5)]),
fch.BarChartGroup(x=6, rods=[CustomRod(6)]),
],
bottom_axis=fch.ChartAxis(
labels=[
fch.ChartAxisLabel(value=0, label=ft.Text("M", color=ft.Colors.BLUE)),
fch.ChartAxisLabel(value=1, label=ft.Text("T", color=ft.Colors.YELLOW)),
fch.ChartAxisLabel(value=2, label=ft.Text("W", color=ft.Colors.BLUE)),
fch.ChartAxisLabel(value=3, label=ft.Text("T", color=ft.Colors.YELLOW)),
fch.ChartAxisLabel(value=4, label=ft.Text("F", color=ft.Colors.BLUE)),
fch.ChartAxisLabel(value=5, label=ft.Text("S", color=ft.Colors.YELLOW)),
fch.ChartAxisLabel(value=6, label=ft.Text("S", color=ft.Colors.BLUE)),
],
),
)
page.add(
ft.Container(
content=chart,
bgcolor=ft.Colors.GREEN_200,
padding=10,
border_radius=5,
expand=True,
)
)
ft.run(main)