Skip to main content

BarChart

Draws a bar chart.

Examples​

Live example

BarChart 1​

import flet as ft

def main(page: ft.Page):
    chart = 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="Apple",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=1,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=100,
                        width=40,
                        color=ft.colors.BLUE,
                        tooltip="Blueberry",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=2,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=30,
                        width=40,
                        color=ft.colors.RED,
                        tooltip="Cherry",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=3,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=60,
                        width=40,
                        color=ft.colors.ORANGE,
                        tooltip="Orange",
                        border_radius=0,
                    ),
                ],
            ),
        ],
        border=ft.border.all(1, ft.colors.GREY_400),
        left_axis=ft.ChartAxis(
            labels_size=40, title=ft.Text("Fruit supply"), title_size=40
        ),
        bottom_axis=ft.ChartAxis(
            labels=[
                ft.ChartAxisLabel(
                    value=0, label=ft.Container(ft.Text("Apple"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=1, label=ft.Container(ft.Text("Blueberry"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=2, label=ft.Container(ft.Text("Cherry"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=3, label=ft.Container(ft.Text("Orange"), 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=110,
        interactive=True,
        expand=True,
    )

    page.add(chart)

ft.app(main)

BarChart 2​

import flet as ft

class SampleRod(ft.BarChartRod):
    def __init__(self, y: float, hovered: bool = False):
        super().__init__()
        self.hovered = hovered
        self.y = y

    def _before_build_command(self):
        self.to_y = self.y + 1 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.GREEN_400)
            if self.hovered
            else ft.BorderSide(width=0, color=ft.colors.WHITE)
        )
        super()._before_build_command()

    def _build(self):
        self.tooltip = str(self.y)
        self.width = 22
        self.color = ft.colors.WHITE
        self.bg_to_y = 20
        self.bg_color = ft.colors.GREEN_300


def main(page: ft.Page):
    def on_chart_event(e: ft.BarChartEvent):
        for group_index, group in enumerate(chart.bar_groups):
            for rod_index, rod in enumerate(group.bar_rods):
                rod.hovered = e.group_index == group_index and e.rod_index == rod_index
        chart.update()

    chart = ft.BarChart(
        bar_groups=[
            ft.BarChartGroup(
                x=0,
                bar_rods=[SampleRod(5)],
            ),
            ft.BarChartGroup(
                x=1,
                bar_rods=[SampleRod(6.5)],
            ),
            ft.BarChartGroup(
                x=2,
                bar_rods=[SampleRod(5)],
            ),
            ft.BarChartGroup(
                x=3,
                bar_rods=[SampleRod(7.5)],
            ),
            ft.BarChartGroup(
                x=4,
                bar_rods=[SampleRod(9)],
            ),
            ft.BarChartGroup(
                x=5,
                bar_rods=[SampleRod(11.5)],
            ),
            ft.BarChartGroup(
                x=6,
                bar_rods=[SampleRod(6)],
            ),
        ],
        bottom_axis=ft.ChartAxis(
            labels=[
                ft.ChartAxisLabel(value=0, label=ft.Text("M")),
                ft.ChartAxisLabel(value=1, label=ft.Text("T")),
                ft.ChartAxisLabel(value=2, label=ft.Text("W")),
                ft.ChartAxisLabel(value=3, label=ft.Text("T")),
                ft.ChartAxisLabel(value=4, label=ft.Text("F")),
                ft.ChartAxisLabel(value=5, label=ft.Text("S")),
                ft.ChartAxisLabel(value=6, label=ft.Text("S")),
            ],
        ),
        on_chart_event=on_chart_event,
        interactive=True,
    )

    page.add(
        ft.Container(
            chart, bgcolor=ft.colors.GREEN_200, padding=10, border_radius=5, expand=True
        )
    )

ft.app(main)

BarChart properties​

animate​

Controls chart implicit animation.

Value is of AnimationValue type.

bar_groups​

The list of BarChartGroup to draw.

baseline_y​

Baseline value for Y axis.

Defaults to 0.

bgcolor​

Background color of the chart.

border​

The border around the chart.

Value is of type Border.

bottom_axis​

Configures the appearance of the bottom axis, its title and labels. The value is the instance of ChartAxis class.

groups_space​

A gap between bar groups.

horizontal_grid_lines​

Controls drawing of chart's horizontal lines.

Value is of type ChartGridLines.

interactive​

Enables automatic tooltips when hovering chart bars.

left_axis​

Configures the appearance of the left axis, its title and labels.

Value is of type ChartAxis.

max_y​

Configures the maximum displayed value for Y axis.

min_y​

Configures the minimum displayed value for Y axis.

right_axis​

Configures the appearance of the right axis, its title and labels. The value is the instance of ChartAxis class.

top_axis​

Configures the appearance of the top axis, its title and labels. The value is the instance of ChartAxis class.

tooltip_bgcolor​

Background color of tooltips.

tooltip_border_side​

The tooltip border side.

tooltip_direction​

Controls showing tooltip on top or bottom, default is auto.

tooltip_fit_inside_horizontally​

Forces the tooltip to shift horizontally inside the chart, if overflow happens.

Value is of type bool.

tooltip_fit_inside_vertically​

Forces the tooltip to shift vertically inside the chart, if overflow happens.

Value is of type bool.

tooltip_horizontal_offset​

Applies horizontal offset for showing tooltip.

Defaults to 0.

tooltip_margin​

Applies a bottom margin for showing tooltip on top of rods.

tooltip_max_content_width​

Restricts the tooltip's width.

tooltip_padding​

Applies a padding for showing contents inside the tooltip.

tooltip_rounded_radius​

Sets a rounded radius for the tooltip.

tooltip_rotate_angle​

The rotation angle of the tooltip.

vertical_grid_lines​

Controls drawing of chart's vertical lines.

Value is of type ChartGridLines.

BarChart events​

on_chart_event​

Fires when a bar is hovered or clicked.

Event handler receives an instance of BarChartEvent.

BarChartGroup properties​

bar_rods​

The list of BarChartRod objects to display in the group.

bars_space​

The gap between bar rods.

group_vertically​

If set to True bar rods are drawn on top of each other; otherwise bar rods are drawn next to each other.

Defaults to False.

x​

Group position on X axis.

BarChartRod properties​

bg_color​

An optional color of a background behind a rod.

bg_from_y​

An optional starting position of a background behind a rod.

bg_gradient​

An optional gradient to draw a background with.

bg_to_y​

An optional ending position of a background behind a rod.

border_radius​

Border radius of a bar rod.

Defaults to 4.

border_side​

Border to draw around rod.

Value is of type BorderSide class.

color​

Rod color.

Defaults to colors.CYAN.

from_y​

Specifies a starting position of a rod on Y axis.

Defaults to 0.

gradient​

Gradient to draw rod's background. The value must be an instance of one of the following classes:

rod_stack_items​

Optional list of BarChartRodStackItem objects to draw a stacked bar.

selected​

If set to True a tooltip is always shown on top of the bar when BarChart.interactive is set to False.

show_tooltip​

Whether a tooltip should be shown on top of hovered bar.

Defaults to True.

to_y​

Specifies an ending position of a rod on Y axis.

tooltip​

A custom tooltip value.

Defaults to to_y.

tooltip_align​

An align for the tooltip.

Value is of type TextAlign.

tooltip_style​

A text style to display tooltip with.

Value is of type TextStyle.

width​

The width of a rod.

Defaults to 8.

BarChartRodStackItem properties​

border_side​

A border around stack item.

Value is of type BorderSide.

color​

A color of stack item.

from_y​

The starting position for a stack item inside a bar rod.

to_y​

The ending position for a stack item inside a bar rod.

ChartGridLines properties​

Configures the appearance of horizontal and vertical grid lines within the chart.

color​

Color of a grid line.

dash_pattern​

Defines dash effect of the line. The value is a circular list of dash offsets and lengths. For example, the list [5, 10] would result in dashes 5 pixels long followed by blank spaces 10 pixels long. By default, a solid line is drawn.

interval​

Interval between grid lines.

Defaults to 1.

width​

Width of a grid line.

Defaults to 1.

ChartAxis properties​

Configures chart axis.

labels​

The list of ChartAxisLabel objects to set custom axis labels for only specific values.

labels_interval​

The interval between automatic labels.

labels_size​

Width or height of labels area.

show_labels​

True to display labels along the axis. If labels is empty then automatic labels are displayed.

title​

A Control to display as axis title.

title_size​

Width or height of title area.

ChartAxisLabel properties​

Configures a custom label for specific value.

label​

A Control to draw as a label.

value​

A value to draw label for.