Labels disappears

[AntonMartyshkov]

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

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<GraphTab>(
                        padding: const EdgeInsets.symmetric(
                          vertical: 4,
                          horizontal: 4,
                        ),
                        groupValue: _selectedSegment,
                        onValueChanged: (GraphTab? value) {
                          setState(() {
                            _selectedSegment = value!;
                          });
                        },
                        children: const <GraphTab, Widget>{
                          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<TimeSeriesPointEntity, DateTime>(
                        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<TimeSeriesPointEntity, DateTime>(
                        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

2024-10-15.12.53.11.mov

Stack Traces

Stack Traces

No stack traces(

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

[✓] 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]

I Do have the same issue

[natrayansf]

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: flutter/flutter#151650

Regards,
Natrayan