Custom LineChart

[Klu1d]

I can't manage to get self.bottom_axis to behave like self.left_axis

The issue is that when I enlarge the window, the labels disappear, but when I make it smaller, they reappear.

As a temporary solution, I set self.bottom_axis.labels_interval = 1, but this causes the labels to overlap, which isn’t ideal for me

I have a strong feeling that I’m missing something :)

2024-11-10.13-47-04.mp4

CODE:

import flet as ft
from datetime import datetime

class Chart(ft.LineChart):
    def __init__(self,   ox_legend: str, ox: list[str], oy_legend: str, oy: list[int]):
        super().__init__()
        self.ox, self.oy = ox, oy
        self.oy_legend = oy_legend
        self.ox_legend = ox_legend

        self.min_x = 0
        self.max_x = len(self.ox) - 1
        self.min_y = 0
        self.max_y = max(self.oy)

        self.expand = True
        self.tooltip_fit_inside_vertically = True
        self.tooltip_fit_inside_horizontally = True
        self.tooltip_max_content_width = 500
        self.tooltip_bgcolor = '#1a2b3d'
        self.tooltip_border_side = ft.BorderSide(2, 'primarycontainer, 0.3')

        self.border = ft.border.all(2, 'primarycontainer, 0.6')
        self.horizontal_grid_lines = self.vertical_grid_lines = ft.ChartGridLines(
            color='primarycontainer, 0.6', width=2,
        )

    def build(self):
        self.data_series = [
            ft.LineChartData(
                stroke_cap_round=True,
                data_points=[
                    ft.LineChartDataPoint(
                        x=x, y=y, point=True,
                    ) for x, y in enumerate(self.oy)
                ],
            ),
        ]
        self.left_axis = ft.ChartAxis(
            title=ft.Text(self.oy_legend, color='blue, 0.9'),
            title_size=20,
            labels_size=40,
            labels=[
                ft.ChartAxisLabel(
                    value=ind,
                    label=ft.Text(ind, text_align=ft.TextAlign.CENTER, color='blue, 0.9'),
                ) for ind in range(0, self.max_y + 1)
            ]
        )

        self.bottom_axis = ft.ChartAxis(
            title=ft.Text(self.ox_legend, color='blue, 0.9'),
            title_size=20,
            labels_size=40,
            labels=[
                ft.ChartAxisLabel(
                    value=ind,
                    label=ft.Text(self.parse_date(self.ox[ind]), color='blue, 0.9'),
                ) for ind in range(0, self.max_x + 1)
            ]
        )

        self.right_axis = ft.ChartAxis(labels=[ft.ChartAxisLabel(value=0, label=ft.Text('  '))])

    def parse_date(self, date_str):
        for fmt in ("%d/%m/%Y", "%d/%m/%y"):
            try:
                return datetime.strptime(date_str, fmt).strftime("%d %b")
            except ValueError:
                continue


def main(page: ft.Page):
    page.add(
        Chart(
            'dates', ['09/02/2021', '11/02/2021', '12/02/2021', '15/02/2021', '16/02/2021'],
            'counts', [1,3,7,2,9]
        )
    )

ft.app(main)

[Klu1d]

When I say that I can't get the same behavior as self.left_axis, I mean the following:

2024-11-10.14-05-48.mp4

[Klu1d]

@ndonkoHenri
Please, could you pay attention to this

[ndonkoHenri]

Issue has been reported in the flutter package we use: imaNNeo/fl_chart#1761

[ndonkoHenri]

Flet issue: #2255