MatplotlibChart
Bases: Container
Displays a Matplotlib chart.
Warning
This control requires the matplotlib
Python package to be installed.
See this installation guide for more information.
adaptive: bool | None = None
Enables platform-specific rendering or inheritance of adaptiveness from parent controls.
alignment: Alignment | None = None
Defines the alignment of the content inside the
container.
animate: AnimationValue | None = None
Enables container "implicit" animation that gradually changes its values over a period of time.
animate_offset: AnimationValue | None = None
animate_opacity: AnimationValue | None = None
animate_position: AnimationValue | None = None
animate_rotation: AnimationValue | None = None
animate_scale: AnimationValue | None = None
blend_mode: BlendMode | None = None
The blend mode applied to the color or gradient background of the container.
Defaults to BlendMode.MODULATE.
blur: BlurValue | None = None
Applies Gaussian blur effect under the container.
Example
ft.Stack(
controls=[
ft.Container(
content=ft.Text("Hello"),
image_src="https://picsum.photos/100/100",
width=100,
height=100,
),
ft.Container(
width=50,
height=50,
blur=10,
bgcolor="#44CCCC00",
),
ft.Container(
width=50,
height=50,
left=10,
top=60,
blur=(0, 10),
),
ft.Container(
top=10,
left=60,
blur=ft.Blur(10, 0, ft.BlurTileMode.MIRROR),
width=50,
height=50,
bgcolor="#44CCCCCC",
border=ft.border.all(2, ft.Colors.BLACK),
),
]
)
bottom: Number | None = None
The distance that the child's bottom edge is inset from the bottom of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
clip_behavior: ClipBehavior | None = None
Defines how the content of the container is clipped.
Defaults to ClipBehavior.ANTI_ALIAS if border_radius is not None;
otherwise ClipBehavior.NONE.
col: ResponsiveNumber = 12
If a parent of this control is a ResponsiveRow,
this property is used to determine
how many virtual columns of a screen this control will span.
Can be a number or a dictionary configured to have a different value for specific
breakpoints, for example col={"sm": 6}.
This control spans the 12 virtual columns by default.
/// details | Dimensions type: info | Breakpoint | Dimension | |---|---| | xs | <576px | | sm | ≥576px | | md | ≥768px | | lg | ≥992px | | xl | ≥1200px | | xxl | ≥1400px | ///
dark_theme: Theme | None = None
Allows setting a nested theme to be used when in dark theme mode for all controls inside the container and down its tree.
disabled: bool = False
Every control has disabled property which is False by default - control and all
its children are enabled.
Note
The value of this property will be propagated down to all children controls recursively.
/// details | Example type: example For example, if you have a form with multiple entry controls you can disable them all together by disabling container:
///
expand_loose: bool = False
Allows the control to expand along the main axis if space is available, but does not require it to fill all available space.
More information here.
figure: Figure = field(metadata={'skip': True})
Matplotlib figure to draw - an instance of
matplotlib.figure.Figure.
foreground_decoration: BoxDecoration | None = None
The foreground decoration of this container.
ignore_interactions: bool = False
Whether to ignore all interactions with this container and its descendants.
image: DecorationImage | None = None
An image to paint above the bgcolor or gradient. If shape=BoxShape.CIRCLE
then this image is clipped to the circle's boundary; if border_radius is not
None then the image is clipped to the given radii.
left: Number | None = None
The distance that the child's left edge is inset from the left of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
margin: MarginValue | None = None
Empty space to surround the decoration and child control.
offset: OffsetValue | None = None
Applies a translation transformation before painting the control.
The translation is expressed as an Offset scaled to the control's size.
So, Offset(x=0.25, y=0), for example, will result in a horizontal translation
of one quarter the width of this control.
/// details | Example
type: example
The following example displays container at 0, 0 top left corner of a stack as
transform applies -1 * 100, -1 * 100 (offset * control's size) horizontal and
vertical translations to the control:
on_animation_end: (
ControlEventHandler[ConstrainedControl] | None
) = None
Called when animation completes.
Can be used to chain multiple animations.
The data property of the event handler argument contains the name of the animation.
More information here.
on_click: ControlEventHandler[Container] | None = None
Called when a user clicks the container. Will not be fired on long press.
on_hover: ControlEventHandler[Container] | None = None
Called when a mouse pointer enters or exists the container area.
The data property of the event handler argument is True when the cursor enters and
False when it exits.
Example
A container changing its background color on mouse hover:
on_long_press: ControlEventHandler[Container] | None = None
Called when this container is long-pressed.
on_tap_down: EventHandler[TapEvent[Container]] | None = None
Called when a user clicks the container with or without a long press.
Info
If ink=True, the event handler argument will be plain
ControlEvent with empty data instead of
TapEvent.
Example
import flet as ft
def main(page: ft.Page):
page.vertical_alignment = ft.MainAxisAlignment.CENTER
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
def on_long_press(e):
print("on long press")
page.add(ft.Text("on_long_press triggered"))
def on_click(e):
print("on click")
page.add(ft.Text("on_click triggered"))
def on_tap_down(e: ft.ContainerTapEvent):
print("on tap down", e.local_x, e.local_y)
page.add(ft.Text("on_tap_down triggered"))
c = ft.Container(
bgcolor=ft.Colors.RED,
content=ft.Text("Test Long Press"),
height=100,
width=100,
on_click=on_click,
on_long_press=on_long_press,
on_tap_down=on_tap_down,
)
page.add(c)
ft.run(main)
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).
original_size: bool = False
Whether to display chart in original size.
Set to False to display a chart that fits configured bounds.
padding: PaddingValue | None = None
Empty space to inscribe inside a container decoration (background, border). The child control is placed inside this padding.
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.
right: Number | None = None
The distance that the child's right edge is inset from the right of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
rotate: RotateValue | None = None
Transforms this control using a rotation around its 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.Rotate- allows to specify rotationangleas well asalignment- the location of rotation center.
/// details | Example type: example For example:
///
scale: ScaleValue | None = None
Scales this control along the 2D plane. Default scale factor is 1.0, meaning no-scale.
Setting this property to 0.5, for example, makes this control twice smaller, while 2.0 makes it twice larger.
Different scale multipliers can be specified for x and y axis, by setting
Control.scale property to an instance of Scale class.
Either scale or scale_x and scale_y could be specified, but not all of them.
/// details | Example type: example
///
theme: Theme | None = None
Allows setting a nested theme for all controls inside the container and down its tree.
Example
import flet as ft
def main(page: ft.Page):
# Yellow page theme with SYSTEM (default) mode
page.theme = ft.Theme(
color_scheme_seed=ft.Colors.YELLOW,
)
page.add(
# Page theme
ft.Container(
content=ft.ElevatedButton("Page theme button"),
bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST,
padding=20,
width=300,
),
# Inherited theme with primary color overridden
ft.Container(
theme=ft.Theme(color_scheme=ft.ColorScheme(primary=ft.Colors.PINK)),
content=ft.ElevatedButton("Inherited theme button"),
bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST,
padding=20,
width=300,
),
# Unique always DARK theme
ft.Container(
theme=ft.Theme(color_scheme_seed=ft.Colors.INDIGO),
theme_mode=ft.ThemeMode.DARK,
content=ft.ElevatedButton("Unique theme button"),
bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST,
padding=20,
width=300,
),
)
ft.run(main)
theme_mode: ThemeMode | None = None
"Resets" parent theme and creates a new, unique scheme for all
controls inside the container. Otherwise the styles defined in container's theme
property override corresponding styles from the parent, inherited theme.
Defaults to ThemeMode.SYSTEM.
tooltip: TooltipValue | None = None
The tooltip ot show when this control is hovered over.
top: Number | None = None
The distance that the child's top edge is inset from the top of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
url: str | None = None
The URL to open when the container is clicked.
If provided, on_click event is fired after that.
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.
Called once during control initialization to define its child controls. self.page is available in this method.
Examples#
Example 1#
Based on an official Matplotlib example.
import flet as ft
import matplotlib
import matplotlib.pyplot as plt
import flet_charts as fch
matplotlib.use("svg")
def main(page: ft.Page):
fig, ax = plt.subplots()
fruits = ["apple", "blueberry", "cherry", "orange"]
counts = [40, 100, 30, 55]
bar_labels = ["red", "blue", "_red", "orange"]
bar_colors = ["tab:red", "tab:blue", "tab:red", "tab:orange"]
ax.bar(fruits, counts, label=bar_labels, color=bar_colors)
ax.set_ylabel("fruit supply")
ax.set_title("Fruit supply by kind and color")
ax.legend(title="Fruit color")
page.add(fch.MatplotlibChart(figure=fig, expand=True))
ft.run(main)
Example 2#
Based on an official Matplotlib example.
import flet as ft
import matplotlib
import matplotlib.pyplot as plt
import numpy as np
import flet_charts as fch
matplotlib.use("svg")
def main(page: ft.Page):
# Fixing random state for reproducibility
np.random.seed(19680801)
dt = 0.01
t = np.arange(0, 30, dt)
nse1 = np.random.randn(len(t)) # white noise 1
nse2 = np.random.randn(len(t)) # white noise 2
# Two signals with a coherent part at 10Hz and a random part
s1 = np.sin(2 * np.pi * 10 * t) + nse1
s2 = np.sin(2 * np.pi * 10 * t) + nse2
fig, axs = plt.subplots(2, 1)
axs[0].plot(t, s1, t, s2)
axs[0].set_xlim(0, 2)
axs[0].set_xlabel("time")
axs[0].set_ylabel("s1 and s2")
axs[0].grid(True)
cxy, f = axs[1].cohere(s1, s2, 256, 1.0 / dt)
axs[1].set_ylabel("coherence")
fig.tight_layout()
page.add(fch.MatplotlibChart(figure=fig, expand=True))
ft.run(main)