Skip to content

CandlestickChart

Draws a candlestick chart representing OHLC values.

Inherits: LayoutControl

Properties

Events

Examples#

Basic Candlestick Chart#

import flet as ft
import flet_charts as ftc

CANDLE_DATA = [
    ("Mon", 24.8, 28.6, 23.9, 27.2),
    ("Tue", 27.2, 30.1, 25.8, 28.4),
    ("Wed", 28.4, 31.2, 26.5, 29.1),
    ("Thu", 29.1, 32.4, 27.9, 31.8),
    ("Fri", 31.8, 34.0, 29.7, 30.2),
    ("Sat", 30.2, 33.6, 28.3, 32.7),
    ("Sun", 32.7, 35.5, 30.1, 34.6),
]


def build_spots() -> list[ftc.CandlestickChartSpot]:
    """Create candlestick spots from the static data."""
    spots: list[ftc.CandlestickChartSpot] = []
    for index, (label, open_, high, low, close) in enumerate(CANDLE_DATA):
        spots.append(
            ftc.CandlestickChartSpot(
                x=float(index),
                open=open_,
                high=high,
                low=low,
                close=close,
                selected=index == len(CANDLE_DATA) - 1,
                tooltip=ftc.CandlestickChartSpotTooltip(
                    text=(
                        f"{label}\n"
                        f"Open: {open_:0.1f}\n"
                        f"High: {high:0.1f}\n"
                        f"Low : {low:0.1f}\n"
                        f"Close: {close:0.1f}"
                    ),
                    bottom_margin=12,
                ),
            )
        )
    return spots


def main(page: ft.Page):
    page.title = "Candlestick chart"
    page.padding = 24
    page.theme_mode = ft.ThemeMode.DARK

    info = ft.Text("Interact with the chart to see event details.")

    spots = build_spots()
    min_x = -0.5
    max_x = len(spots) - 0.5
    min_y = min(low for _, _, _, low, _ in CANDLE_DATA) - 1
    max_y = max(high for _, _, _, _, high in CANDLE_DATA) + 1

    def handle_event(e: ftc.CandlestickChartEvent):
        if e.spot_index is not None and e.spot_index >= 0:
            label, open_, high, low, close = CANDLE_DATA[e.spot_index]
            info.value = (
                f"{e.type.value} • {label}: "
                f"O {open_:0.1f}  H {high:0.1f}  L {low:0.1f}  C {close:0.1f}"
            )
        else:
            info.value = f"{e.type.value} • outside candlesticks"
        info.update()

    chart = ftc.CandlestickChart(
        expand=True,
        min_x=min_x,
        max_x=max_x,
        min_y=min_y,
        max_y=max_y,
        baseline_x=0,
        baseline_y=min_y,
        bgcolor=ft.Colors.with_opacity(0.2, ft.Colors.BLUE_GREY_900),
        horizontal_grid_lines=ftc.ChartGridLines(interval=2, dash_pattern=[2, 2]),
        vertical_grid_lines=ftc.ChartGridLines(interval=1, dash_pattern=[2, 2]),
        left_axis=ftc.ChartAxis(
            label_spacing=2,
            label_size=60,
            title=ft.Text("Price (k USD)", color=ft.Colors.GREY_300),
            show_min=False,
        ),
        bottom_axis=ftc.ChartAxis(
            labels=[
                ftc.ChartAxisLabel(
                    value=index,
                    label=ft.Text(name, color=ft.Colors.GREY_300),
                )
                for index, (name, *_rest) in enumerate(CANDLE_DATA)
            ],
            label_spacing=1,
            label_size=40,
            show_min=False,
            show_max=False,
        ),
        spots=spots,
        tooltip=ftc.CandlestickChartTooltip(
            bgcolor=ft.Colors.BLUE_GREY_800,
            horizontal_alignment=ftc.HorizontalAlignment.CENTER,
            fit_inside_horizontally=True,
        ),
        on_event=handle_event,
    )

    page.add(
        ft.Container(
            expand=True,
            border_radius=16,
            padding=20,
            content=ft.Column(
                expand=True,
                spacing=20,
                controls=[
                    ft.Text(
                        "Weekly OHLC snapshot (demo data)",
                        size=20,
                        weight=ft.FontWeight.BOLD,
                    ),
                    chart,
                    info,
                ],
            ),
        )
    )


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 animations.

baseline_x class-attribute instance-attribute #

baseline_x: Number | None = None

Baseline value on the X axis.

baseline_y class-attribute instance-attribute #

baseline_y: Number | None = None

Baseline value on the Y axis.

bgcolor class-attribute instance-attribute #

bgcolor: ColorValue | None = None

Background color of the chart.

border class-attribute instance-attribute #

border: Border | None = None

Border drawn around the chart.

bottom_axis class-attribute instance-attribute #

bottom_axis: ChartAxis | None = None

Appearance of the bottom axis, its title and labels.

horizontal_grid_lines class-attribute instance-attribute #

horizontal_grid_lines: ChartGridLines | None = None

Horizontal grid lines configuration.

interactive class-attribute instance-attribute #

interactive: bool = True

Enables automatic tooltips and highlighting when hovering the chart.

left_axis class-attribute instance-attribute #

left_axis: ChartAxis | None = None

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

Maximum value displayed on the X axis.

max_y class-attribute instance-attribute #

max_y: Number | None = None

Maximum value displayed on the Y axis.

min_x class-attribute instance-attribute #

min_x: Number | None = None

Minimum value displayed on the X axis.

min_y class-attribute instance-attribute #

min_y: Number | None = None

Minimum value displayed on the Y axis.

right_axis class-attribute instance-attribute #

right_axis: ChartAxis | None = None

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.

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[CandlestickChartSpot] = field(
    default_factory=list
)

Candlesticks to display on the chart.

tooltip class-attribute instance-attribute #

tooltip: CandlestickChartTooltip | None = field(
    default_factory=lambda: CandlestickChartTooltip()
)

Tooltip configuration for the chart.

top_axis class-attribute instance-attribute #

top_axis: ChartAxis | None = None

Appearance of the top axis, its title and labels.

touch_spot_threshold class-attribute instance-attribute #

touch_spot_threshold: Number = 4

The distance threshold to consider a touch near a candlestick.

vertical_grid_lines class-attribute instance-attribute #

vertical_grid_lines: ChartGridLines | None = None

Vertical grid lines configuration.

Events#

on_event class-attribute instance-attribute #

on_event: EventHandler[CandlestickChartEvent] | None = None

Called when an event occurs on this chart.