PlotlyChart
Bases: Container
Displays a Plotly chart.
Warning
This control requires the plotly 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})
Plotly figure to draw -
an instance of plotly.graph_objects.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 this chart in original size.
Set to False for it to fit it's 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 Plotly example.
import flet as ft
import plotly.express as px
import flet_charts as fch
def main(page: ft.Page):
df = px.data.gapminder().query("continent=='Oceania'")
fig = px.line(df, x="year", y="lifeExp", color="country")
page.add(fch.PlotlyChart(figure=fig, expand=True))
ft.run(main)
Example 2#
Based on an official Plotly example.
import flet as ft
import plotly.express as px
import flet_charts as fch
def main(page: ft.Page):
df = px.data.gapminder().query("continent == 'Oceania'")
fig = px.bar(
df,
x="year",
y="pop",
hover_data=["lifeExp", "gdpPercap"],
color="country",
labels={"pop": "population of Canada"},
height=400,
)
page.add(fch.PlotlyChart(figure=fig, expand=True))
ft.run(main)
Example 3#
Based on an official Plotly example.
import flet as ft
import plotly.graph_objects as go
import flet_charts as fch
def main(page: ft.Page):
labels = ["Oxygen", "Hydrogen", "Carbon_Dioxide", "Nitrogen"]
values = [4500, 2500, 1053, 500]
fig = go.Figure(data=[go.Pie(labels=labels, values=values)])
page.add(fch.PlotlyChart(figure=fig, expand=True))
ft.run(main)
Example 4#
Based on an official Plotly example.
import flet as ft
import plotly.graph_objects as go
import flet_charts as fch
def main(page: ft.Page):
x = [
"day 1",
"day 1",
"day 1",
"day 1",
"day 1",
"day 1",
"day 2",
"day 2",
"day 2",
"day 2",
"day 2",
"day 2",
]
fig = go.Figure()
fig.add_trace(
go.Box(
y=[0.2, 0.2, 0.6, 1.0, 0.5, 0.4, 0.2, 0.7, 0.9, 0.1, 0.5, 0.3],
x=x,
name="kale",
marker_color="#3D9970",
)
)
fig.add_trace(
go.Box(
y=[0.6, 0.7, 0.3, 0.6, 0.0, 0.5, 0.7, 0.9, 0.5, 0.8, 0.7, 0.2],
x=x,
name="radishes",
marker_color="#FF4136",
)
)
fig.add_trace(
go.Box(
y=[0.1, 0.3, 0.1, 0.9, 0.6, 0.6, 0.9, 1.0, 0.3, 0.6, 0.8, 0.5],
x=x,
name="carrots",
marker_color="#FF851B",
)
)
fig.update_layout(
yaxis_title="normalized moisture",
boxmode="group", # group together boxes of the different traces for each value of x
)
page.add(fch.PlotlyChart(figure=fig, expand=True))
ft.run(main)