syncfusion / flutter-widgets

Syncfusion Flutter widgets libraries include high quality UI widgets and file-format packages to help you create rich, high-quality applications for iOS, Android, and web from a single code base.
1.58k stars 772 forks source link

Labels disappears #2132

Open AntonMartyshkov opened 1 week ago

AntonMartyshkov commented 1 week ago

Bug description

Hi, thank you for yours library. We have an issue on Flutter Web, Chrome, Safari, Yandex browsers. How you can see in video, after animation end, 3rd label disappears, if I disable animation, I'll see same result as in video when animation ends. Unfortunately this issue works only after deploy, on localhost everything ok. Also tried test it with flutter run --release, but no issues

Flutter stable 3.22 syncfusion_flutter_charts: 27.1.52 Chrome stable latest

Thanks you, Best wishes, Tony.

Steps to reproduce

1 run Web NOT on localhost, can reproduce only after deploy

Code sample

Code sample ```dart Container( decoration: BoxDecoration( color: AppColors.white, borderRadius: BorderRadius.circular(16), ), width: 608, padding: const EdgeInsets.all(16), child: Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'Статистика зарядки', style: AppTextStyles.mediumTitle500(AppColors.black), ), if (state.timeSeries?.powerDcGraph != null) SizedBox( width: 320, child: CupertinoSlidingSegmentedControl( padding: const EdgeInsets.symmetric( vertical: 4, horizontal: 4, ), groupValue: _selectedSegment, onValueChanged: (GraphTab? value) { setState(() { _selectedSegment = value!; }); }, children: const { GraphTab.all: Padding( padding: EdgeInsets.symmetric(vertical: 8), child: Text( 'Все', textAlign: TextAlign.center, ), ), GraphTab.power: Padding( padding: EdgeInsets.symmetric(vertical: 8), child: Text( 'Мощность', ), ), GraphTab.percent: Padding( padding: EdgeInsets.symmetric(vertical: 8), child: Text( 'Процент заряда', textAlign: TextAlign.center, ), ), }, ), ), ], ), const SizedBox(height: 16), SizedBox( width: 600, height: 310, child: SfCartesianChart( primaryYAxis: NumericAxis( labelStyle: AppTextStyles.bodyxs500(AppColors.black), title: AxisTitle( text: _selectedSegment == GraphTab.all || _selectedSegment == GraphTab.percent ? 'Процент заряда' : 'Мощность', ), ), primaryXAxis: DateTimeAxis( labelStyle: AppTextStyles.bodyxs500(AppColors.black), title: const AxisTitle(text: 'Время'), ), axes: [ if ((_selectedSegment == GraphTab.all || _selectedSegment == GraphTab.power) && state.timeSeries?.powerDcGraph != null) NumericAxis( title: const AxisTitle(text: 'Мощность'), name: 'yAxis', opposedPosition: true, axisBorderType: AxisBorderType.withoutTopAndBottom, labelStyle: AppTextStyles.bodyxs500(AppColors.black), ), ], tooltipBehavior: _tooltipBehavior, series: [ if (_selectedSegment == GraphTab.all || _selectedSegment == GraphTab.percent) StepLineSeries( name: 'Процент заряда, %', dataSource: state.timeSeries?.socGraph ?? [], xValueMapper: (TimeSeriesPointEntity i, _) => i.time, yValueMapper: (TimeSeriesPointEntity i, _) => i.value, markerSettings: const MarkerSettings(isVisible: true), color: const Color(0xffFFAB00), width: 3, ), if ((_selectedSegment == GraphTab.all || _selectedSegment == GraphTab.power) && state.timeSeries?.powerDcGraph != null) StepLineSeries( name: 'Мощность, кВт', dataSource: state.timeSeries?.powerDcGraph ?? [], xValueMapper: (TimeSeriesPointEntity i, _) => i.time, yValueMapper: (TimeSeriesPointEntity i, _) => i.value / 1000, yAxisName: _selectedSegment == GraphTab.all ? 'yAxis' : null, markerSettings: const MarkerSettings(isVisible: true), color: const Color(0xffB75EED), width: 3, ), ], ), ), ], ), ); ```

Screenshots or Video

Screenshots / Video demonstration https://github.com/user-attachments/assets/f8126cee-f6d0-4c25-8c4c-55072609cee4

Stack Traces

Stack Traces ```dart No stack traces( ```

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output ```console [✓] Flutter (Channel stable, 3.22.2, on macOS 15.0.1 24A348 darwin-arm64, locale ru-RU) [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [!] Xcode - develop for iOS and macOS (Xcode 16.0) ✗ Unable to get list of installed Simulator runtimes. [✓] Chrome - develop for the web [✓] Android Studio (version 2024.2) [✓] VS Code (version 1.94.1) [✓] Connected device (4 available) [✓] Network resources ```
nefus8 commented 17 hours ago

I Do have the same issue

natrayansf commented 11 hours ago

Hi @AntonMartyshkov,

We can replicate this issue and already we have logged a bug report for this issue at our end. Unfortunately, we were unable to resolve this issue on our end due to a framework-level issue. The reason we are facing this issue is that we made architectural changes to the Chart widget to improve the widget loading performance on the Volume 4, 2023 release. In doing so, we placed the axis on top of the series for behavioral improvement, but this caused issues in Web HTML rendering. We have created an issue report for the framework, and they have acknowledged it.

We are continuously following the issue and will update you once it has been fixed. We have shared the issue link below for your reference.

Framework issue: https://github.com/flutter/flutter/issues/151650

Regards, Natrayan