[Question] Labels are being cut off in ChartAxis

[seriaati]

Question

i am having 2 issues here:

1. the labels in the vertical axis are being cut-off, it should be 200, 400, 600, etc. but the trailing 0s are gone, if i remove max_lines=1, then it will overflow to the next line like

6
00

but the desired result is showing all numbers in the same line without getting anything cut-off.
2. the labels in the horizontal axis are also being cut off by the chart, but if i remove the top margin, then they will get too close to the chart, the desired result is maintaing the top margin (10) but without the labels getting cut off.

Code sample

from typing import Dict

import flet as ft

from ....models import Order


class OrderHistoryChart(ft.UserControl):
    def __init__(self):
        super().__init__()

        self.line_chart_data: ft.LineChartData

        self.title_text_ref = ft.Ref[ft.Text]()
        self.line_chart_ref = ft.Ref[ft.LineChart]()
        self.previous_chart_button_ref = ft.Ref[ft.IconButton]()
        self.next_chart_button_ref = ft.Ref[ft.IconButton]()

        self.start = 1
        self.end = 6

    async def fetch_data_series(self) -> None:
        orders = await Order.all()
        total_order_amount_by_month: Dict[int, int] = {}
        for order in orders:
            month = order.created_at.month
            total_order_amount_by_month.setdefault(month, 0)
            total_order_amount_by_month[month] += order.amount

        # fake data for testing
        total_order_amount_by_month = {
            1: 400,
            2: 200,
            3: 900,
            4: 100,
            5: 500,
            6: 600,
            7: 700,
            8: 1100,
            9: 300,
            10: 1000,
            11: 400,
            12: 1200,
        }

        data_points = [
            ft.LineChartDataPoint(month, amount)
            for month, amount in total_order_amount_by_month.items()
            if self.start <= month <= self.end
        ]
        self.line_chart_data = ft.LineChartData(
            data_points,
            curved=True,
            stroke_cap_round=True,
            stroke_width=3,
            color=ft.colors.PRIMARY,
        )

    def get_horizontal_axis(self) -> ft.ChartAxis:
        labels = [
            ft.ChartAxisLabel(
                value=i,
                label=ft.Container(
                    ft.Text(
                        f"{i}月",
                        size=16,
                        weight=ft.FontWeight.BOLD,
                        color=ft.colors.with_opacity(0.5, ft.colors.ON_SURFACE),
                    ),
                    margin=ft.margin.only(top=10),
                ),
            )
            for i in range(self.start, self.end + 1)
        ]
        return ft.ChartAxis(labels=labels, show_labels=True, labels_interval=1)

    def get_vertical_axis(self) -> ft.ChartAxis:
        labels = [
            ft.ChartAxisLabel(
                value=i,
                label=ft.Container(
                    ft.Text(str(i), size=14, max_lines=1),
                    margin=ft.margin.only(right=10),
                ),
            )
            for i in range(
                0, max(self.line_chart_data.data_points, key=lambda x: x.y).y, 200
            )
        ]
        return ft.ChartAxis(labels=labels, show_labels=True, labels_interval=200)

    async def update_chart(self) -> None:
        self.previous_chart_button_ref.current.disabled = not (
            self.previous_chart_button_ref.current.disabled
        )
        await self.previous_chart_button_ref.current.update_async()
        self.next_chart_button_ref.current.disabled = not (
            self.next_chart_button_ref.current.disabled
        )
        await self.next_chart_button_ref.current.update_async()

        self.title_text_ref.current.value = f"歷史訂單總數 ({self.start}月 ~ {self.end}月)"
        await self.title_text_ref.current.update_async()

        await self.fetch_data_series()
        self.line_chart_ref.current.data_series = [self.line_chart_data]
        self.line_chart_ref.current.left_axis = self.get_vertical_axis()
        self.line_chart_ref.current.bottom_axis = self.get_horizontal_axis()
        await self.line_chart_ref.current.update_async()

    async def previous_chart(self, _: ft.ControlEvent) -> None:
        self.start = 1
        self.end = 6
        await self.update_chart()

    async def next_chart(self, _: ft.ControlEvent) -> None:
        self.start = 7
        self.end = 12
        await self.update_chart()

    def build(self) -> ft.Control:
        return ft.Stack(
            [
                ft.Card(
                    ft.Column(
                        [
                            ft.Container(
                                ft.Text(
                                    "歷史訂單總數",
                                    size=20,
                                    weight=ft.FontWeight.W_700,
                                    ref=self.title_text_ref,
                                ),
                                margin=ft.margin.only(top=16, left=16),
                            ),
                            ft.Container(
                                ft.LineChart(
                                    ref=self.line_chart_ref,
                                    data_series=[self.line_chart_data],
                                    left_axis=self.get_vertical_axis(),
                                    bottom_axis=self.get_horizontal_axis(),
                                    min_y=0,
                                    expand=True,
                                ),
                                margin=16,
                            ),
                        ]
                    ),
                ),
                ft.Container(
                    ft.Row(
                        [
                            ft.IconButton(
                                ft.icons.ARROW_LEFT,
                                ref=self.previous_chart_button_ref,
                                on_click=self.previous_chart,
                                disabled=True,
                            ),
                            ft.IconButton(
                                ft.icons.ARROW_RIGHT,
                                ref=self.next_chart_button_ref,
                                on_click=self.next_chart,
                            ),
                        ],
                    ),
                    margin=ft.margin.only(top=16, right=16),
                    top=0,
                    right=0,
                ),
            ]
        )

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[FeodorFitsner]

Use label_size property to give more space to labels.