Skip to content

ScatterChart

A scatter chart control.

ScatterChart draws some points in a square space, points are defined by ScatterChartSpots.

Inherits: LayoutControl

Properties

Events

Examples#

Basic Scatter Chart#

import random

import flet as ft
import flet_charts as ftc


class MySpot(ftc.ScatterChartSpot):
    def __init__(
        self,
        x: float,
        y: float,
        radius: float = 8.0,
        color: ft.Colors = None,
        show_tooltip: bool = False,
    ):
        super().__init__(
            x=x,
            y=y,
            radius=radius,
            color=color,
            show_tooltip=show_tooltip,
            selected=y == 43,
        )


flutter_logo_spots = [
    MySpot(20, 14.5),
    MySpot(20, 14.5),
    MySpot(22, 16.5),
    MySpot(24, 18.5),
    MySpot(22, 12.5),
    MySpot(24, 14.5),
    MySpot(26, 16.5),
    MySpot(24, 10.5),
    MySpot(26, 12.5),
    MySpot(28, 14.5),
    MySpot(26, 8.5),
    MySpot(28, 10.5),
    MySpot(30, 12.5),
    MySpot(28, 6.5),
    MySpot(30, 8.5),
    MySpot(32, 10.5),
    MySpot(30, 4.5),
    MySpot(32, 6.5),
    MySpot(34, 8.5),
    MySpot(34, 4.5),
    MySpot(36, 6.5),
    MySpot(38, 4.5),
    #  section 2
    MySpot(20, 14.5),
    MySpot(22, 12.5),
    MySpot(24, 10.5),
    MySpot(22, 16.5),
    MySpot(24, 14.5),
    MySpot(26, 12.5),
    MySpot(24, 18.5),
    MySpot(26, 16.5),
    MySpot(28, 14.5),
    MySpot(26, 20.5),
    MySpot(28, 18.5),
    MySpot(30, 16.5),
    MySpot(28, 22.5),
    MySpot(30, 20.5),
    MySpot(32, 18.5),
    MySpot(30, 24.5),
    MySpot(32, 22.5),
    MySpot(34, 20.5),
    MySpot(34, 24.5),
    MySpot(36, 22.5),
    MySpot(38, 24.5),
    # section 3
    MySpot(10, 25),
    MySpot(12, 23),
    MySpot(14, 21),
    MySpot(12, 27),
    MySpot(14, 25),
    MySpot(16, 23),
    MySpot(14, 29),
    MySpot(16, 27),
    MySpot(18, 25),
    MySpot(16, 31),
    MySpot(18, 29),
    MySpot(20, 27),
    MySpot(18, 33),
    MySpot(20, 31),
    MySpot(22, 29),
    MySpot(20, 35),
    MySpot(22, 33),
    MySpot(24, 31),
    MySpot(22, 37),
    MySpot(24, 35),
    MySpot(26, 33),
    MySpot(24, 39),
    MySpot(26, 37),
    MySpot(28, 35),
    MySpot(26, 41),
    MySpot(28, 39),
    MySpot(30, 37),
    MySpot(28, 43),
    MySpot(30, 41),
    MySpot(32, 39),
    MySpot(30, 45),
    MySpot(32, 43),
    MySpot(34, 41),
    MySpot(34, 45),
    MySpot(36, 43),
    MySpot(38, 45),
]


def get_random_spots():
    """Generates random spots for the scatter chart."""
    return [
        MySpot(
            x=random.uniform(4, 50),
            y=random.uniform(4, 50),
            radius=random.uniform(4, 20),
        )
        for _ in range(len(flutter_logo_spots))
    ]


def main(page: ft.Page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def handle_event(e: ftc.ScatterChartEvent):
        if e.type == ftc.ChartEventType.TAP_DOWN:
            e.control.spots = (
                flutter_logo_spots
                if (e.control.spots != flutter_logo_spots)
                else get_random_spots()
            )

    page.add(
        ft.Text(
            "Tap on the chart to toggle between random spots and Flutter logo spots."
        ),
        ftc.ScatterChart(
            expand=True,
            aspect_ratio=1.0,
            min_x=0.0,
            max_x=50.0,
            min_y=0.0,
            max_y=50.0,
            left_axis=ftc.ChartAxis(show_labels=False),
            right_axis=ftc.ChartAxis(show_labels=False),
            top_axis=ftc.ChartAxis(show_labels=False),
            bottom_axis=ftc.ChartAxis(show_labels=False),
            show_tooltips_for_selected_spots_only=False,
            on_event=handle_event,
            animation=ft.Animation(
                duration=ft.Duration(milliseconds=600),
                curve=ft.AnimationCurve.FAST_OUT_SLOWIN,
            ),
            spots=flutter_logo_spots,
        ),
    )


ft.run(main)

example_1.png

Properties#

animation class-attribute instance-attribute #

animation: AnimationValue = field(
    default_factory=lambda: Animation(
        duration=Duration(milliseconds=150), curve=LINEAR
    )
)

Controls chart implicit animation.

baseline_x class-attribute instance-attribute #

baseline_x: Number | None = None

The baseline value for X axis.

baseline_y class-attribute instance-attribute #

baseline_y: Number | None = None

Baseline value for Y axis.

bgcolor class-attribute instance-attribute #

bgcolor: ColorValue | None = None

The chart's background color.

border class-attribute instance-attribute #

border: Border | None = None

The border around the chart.

bottom_axis class-attribute instance-attribute #

bottom_axis: ChartAxis | None = None

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

horizontal_grid_lines class-attribute instance-attribute #

horizontal_grid_lines: ChartGridLines | None = None

Controls drawing of chart's horizontal lines.

interactive class-attribute instance-attribute #

interactive: bool = True

Enables automatic tooltips when hovering chart bars.

left_axis class-attribute instance-attribute #

left_axis: ChartAxis | None = None

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

long_press_duration class-attribute instance-attribute #

long_press_duration: DurationValue | None = None

The duration of a long press on the chart.

max_x class-attribute instance-attribute #

max_x: Number | None = None

The maximum displayed value for X axis.

max_y class-attribute instance-attribute #

max_y: Number | None = None

The maximum displayed value for Y axis.

min_x class-attribute instance-attribute #

min_x: Number | None = None

The minimum displayed value for X axis.

min_y class-attribute instance-attribute #

min_y: Number | None = None

The minimum displayed value for Y axis.

right_axis class-attribute instance-attribute #

right_axis: ChartAxis | None = None

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

rotation_quarter_turns class-attribute instance-attribute #

rotation_quarter_turns: Number = 0

Number of quarter turns (90-degree increments) to rotate the chart. Ex: 1 rotates the chart 90 degrees clockwise, 2 rotates 180 degrees and 0 for no rotation.

show_tooltips_for_selected_spots_only class-attribute instance-attribute #

show_tooltips_for_selected_spots_only: bool = False

Whether to permanently and only show the tooltips of spots with their selected property set to True.

spots class-attribute instance-attribute #

spots: list[ScatterChartSpot] = field(default_factory=list)

List of ScatterChartSpots to show on the chart.

tooltip class-attribute instance-attribute #

tooltip: ScatterChartTooltip = field(
    default_factory=lambda: ScatterChartTooltip()
)

The tooltip configuration for the chart.

top_axis class-attribute instance-attribute #

top_axis: ChartAxis | None = None

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

vertical_grid_lines class-attribute instance-attribute #

vertical_grid_lines: ChartGridLines | None = None

Controls drawing of chart's vertical lines.

Events#

on_event class-attribute instance-attribute #

on_event: EventHandler[ScatterChartEvent] | None = None

Called when an event occurs on this chart.