Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Line chart color rendering issue in Flet 0.22.0 #3023

Closed
PIGzyj233 opened this issue Apr 14, 2024 · 3 comments · Fixed by #3033
Closed

Line chart color rendering issue in Flet 0.22.0 #3023

PIGzyj233 opened this issue Apr 14, 2024 · 3 comments · Fixed by #3033
Assignees
Labels
bug: regression A feature that worked correctly doesn't anymore has reproducible steps Issue is reproducible

Comments

@PIGzyj233
Copy link

PIGzyj233 commented Apr 14, 2024

Description

I'm experiencing an issue with the rendering of line chart colors in Flet version 0.22.0. The issue does not occur in the previous version 0.21.2.

Steps to Reproduce:

  1. Create a new Flet application with the following code, this code comes from https://flet.dev/docs/controls/linechart:

  2. Run the application

Code example to reproduce the issue:

import flet as ft

class State:
    toggle = True

s = State()

def main(page: ft.Page):
    data_1 = [
        ft.LineChartData(
            data_points=[
                ft.LineChartDataPoint(0, 3),
                ft.LineChartDataPoint(2.6, 2),
                ft.LineChartDataPoint(4.9, 5),
                ft.LineChartDataPoint(6.8, 3.1),
                ft.LineChartDataPoint(8, 4),
                ft.LineChartDataPoint(9.5, 3),
                ft.LineChartDataPoint(11, 4),
            ],
            stroke_width=5,
            color=ft.colors.PINK,
            curved=True,
            stroke_cap_round=True,
        )
    ]

    data_2 = [
        ft.LineChartData(
            data_points=[
                ft.LineChartDataPoint(0, 3.44),
                ft.LineChartDataPoint(2.6, 3.44),
                ft.LineChartDataPoint(4.9, 3.44),
                ft.LineChartDataPoint(6.8, 3.44),
                ft.LineChartDataPoint(8, 3.44),
                ft.LineChartDataPoint(9.5, 3.44),
                ft.LineChartDataPoint(11, 3.44),
            ],
            stroke_width=5,
            color=ft.colors.RED,
            curved=True,
            stroke_cap_round=True,
        )
    ]

    chart = ft.LineChart(
        data_series=data_1,
        border=ft.border.all(3, ft.colors.with_opacity(0.2, ft.colors.ON_SURFACE)),
        horizontal_grid_lines=ft.ChartGridLines(
            interval=1, color=ft.colors.with_opacity(0.2, ft.colors.ON_SURFACE), width=1
        ),
        vertical_grid_lines=ft.ChartGridLines(
            interval=1, color=ft.colors.with_opacity(0.2, ft.colors.ON_SURFACE), width=1
        ),
        left_axis=ft.ChartAxis(
            labels=[
                ft.ChartAxisLabel(
                    value=1,
                    label=ft.Text("10K", size=14, weight=ft.FontWeight.BOLD),
                ),
                ft.ChartAxisLabel(
                    value=3,
                    label=ft.Text("30K", size=14, weight=ft.FontWeight.BOLD),
                ),
                ft.ChartAxisLabel(
                    value=5,
                    label=ft.Text("50K", size=14, weight=ft.FontWeight.BOLD),
                ),
            ],
            labels_size=40,
        ),
        bottom_axis=ft.ChartAxis(
            labels=[
                ft.ChartAxisLabel(
                    value=2,
                    label=ft.Container(
                        ft.Text(
                            "MAR",
                            size=16,
                            weight=ft.FontWeight.BOLD,
                            color=ft.colors.with_opacity(0.5, ft.colors.ON_SURFACE),
                        ),
                        margin=ft.margin.only(top=10),
                    ),
                ),
                ft.ChartAxisLabel(
                    value=5,
                    label=ft.Container(
                        ft.Text(
                            "JUN",
                            size=16,
                            weight=ft.FontWeight.BOLD,
                            color=ft.colors.with_opacity(0.5, ft.colors.ON_SURFACE),
                        ),
                        margin=ft.margin.only(top=10),
                    ),
                ),
                ft.ChartAxisLabel(
                    value=8,
                    label=ft.Container(
                        ft.Text(
                            "SEP",
                            size=16,
                            weight=ft.FontWeight.BOLD,
                            color=ft.colors.with_opacity(0.5, ft.colors.ON_SURFACE),
                        ),
                        margin=ft.margin.only(top=10),
                    ),
                ),
            ],
            labels_size=32,
        ),
        tooltip_bgcolor=ft.colors.with_opacity(0.8, ft.colors.BLUE_GREY),
        min_y=0,
        max_y=6,
        min_x=0,
        max_x=11,
        # animate=5000,
        expand=True,
    )

    def toggle_data(e):
        if s.toggle:
            chart.data_series = data_2
            chart.interactive = False
        else:
            chart.data_series = data_1
            chart.interactive = True
        s.toggle = not s.toggle
        chart.update()

    page.add(ft.ElevatedButton("avg", on_click=toggle_data), chart)

ft.app(main)

Describe the results you received:

image

Actual Behavior:
In Flet version 0.22.0, the line chart is not rendering in the expected pink color. Instead, it can only be rendered in blue.
Another instance of the bar chart renders as expected, this phenomenon only seems to occur with the line chart
Describe the results you expected:

The line chart should render in pink color as specified by ft.colors.PINK.

Additional information you deem important (e.g. issue happens only occasionally):
not occasionally

Flet version (pip show flet):

Name: flet
Version: 0.22.0
Summary: Flet for Python - easily build interactive multi-platform apps in Python
Home-page:
Author: Appveyor Systems Inc.
Author-email: hello@flet.dev
License: Apache-2.0
Location: C:\Python311\Lib\site-packages
Requires: cookiecutter, fastapi, flet-runtime, packaging, qrcode, uvicorn, watchdog

Operating system:

Additional environment details:

@Zeeico
Copy link

Zeeico commented Apr 14, 2024

Can confirm, I'm seeing this too with code that previously worked.

@cccaballero
Copy link

Same issue here, using 0.22.0 in Ubuntu 22.04 OS and Python 3.12.2

@ndonkoHenri ndonkoHenri added has reproducible steps Issue is reproducible bug: regression A feature that worked correctly doesn't anymore labels Apr 14, 2024
@ndonkoHenri
Copy link
Collaborator

Thanks for reporting. We will have a look...

@ndonkoHenri ndonkoHenri self-assigned this Apr 16, 2024
@ndonkoHenri ndonkoHenri linked a pull request Apr 16, 2024 that will close this issue
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug: regression A feature that worked correctly doesn't anymore has reproducible steps Issue is reproducible
Projects
Status: ✅ Done
Development

Successfully merging a pull request may close this issue.

4 participants