SfCartesianChart Y axis gets disappear in mobile browser in release mode. as it is working in debug mode properly.

[Mujjafar-Momin]

Bug description

The graph were perfectly working in regular browser In desktop like chrome and safari, But giving issues in mobile browsers.

Steps to reproduce

The graph were perfectly working in regular browser In desktop like chrome and safari, But giving issues in mobile browsers.

Code sample

Code sample

[Add your code here]
 SizedBox(
              height: 200,
              width: double.maxFinite,
              child: SfCartesianChart(
                plotAreaBorderWidth: 0,
                borderColor: Colors.transparent,
                primaryXAxis:  CategoryAxis(
                  axisLine: AxisLine(width: 1, color:  Colors.grey),
                  majorGridLines: const MajorGridLines(width: 0),
                  majorTickLines: const MajorTickLines(width: 0),
                  labelStyle: textStyle(color: Colors.black),
                ),
                primaryYAxis: NumericAxis(
                  maximum: maxValue ?? 100,
                  minimum: minValue ?? 0.0,
                  interval: interval ?? 20.0,
                  axisLine: AxisLine(width: 1 ,color: Colors.grey),
                  majorGridLines: const MajorGridLines(width: 1, dashArray: [1000, 5]),
                  majorTickLines: const MajorTickLines(width: 0),
                  labelStyle: TextStyle(color:  Colors.blue),
                  plotBands: <PlotBand>[
                    PlotBand(
                      isVisible: true,
                      start: double.parse(averageCalories ?? '0'),
                      end: double.parse(averageCalories ?? '0'),
                      borderColor: Colors.redAccent,
                      borderWidth: 1.3,
                      dashArray: const [5, 5],
                    )
                  ],
                ),
                series: <CartesianSeries>[
                  SplineAreaSeries<CaloiesDatum, String>(
                    dataSource: caloiesData,
                    color: Colors.blue,
                    markerSettings: const MarkerSettings(isVisible: true, shape: DataMarkerType.circle, color: Colors.blue, width: 2, height: 2),
                    gradient: const LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Colors.blue, Colors.white],
                    ),
                    xValueMapper: (CaloiesDatum datum, _) {
                      return datum.date;
                    },
                    yValueMapper: (CaloiesDatum datum, _) {
                      return datum.calorie;
                    },
                  )
                ],
              ),
            ),

Screenshots or Video

image not available

Stack Traces

Stack Traces

 Getting issue in release build only 

On which target platforms have you observed this bug?

Web (Android browser), Web (iOS browser)

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.22.2, on macOS 14.6.1 23G93 darwin-arm64, locale en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] VS Code (version 1.93.1)
[✓] Connected device (4 available)
[✓] Network resources

[PreethikaSelvam]

Hi @Mujjafar-Momin,

We have tried to replicate the reported issue with the provided code snippet in latest chart version 27.1.57 at our end. Unfortunately, we are unable to reproduce any issue as we are not sure in what scenario the issue is replicating. Therefore, we kindly request you to try to replicate the reported issue in the below attached test sample and provide us with more details regarding the specific scenario in which you are encountering this issue, along with a screen recording or screenshot. This will help us to assist you more effectively.

We tried the following ways to reproduce the issue:

• Checked with the single x and y axis.
• Checked with the multiple x and y axis.
• Tested on Android, Web, and Windows platforms in release mode.
• Tested with Android browser [Host link: https://preethikaselvam.github.io/ ]

Additionally, we would like to let you know, that when we run the sample in the Web HTML renderer along with the fade animation the axis lines get hidden, this is because of some framework-level issue. Since this is a framework-level issue, we were unable to resolve this issue on our end. 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.

If this is the issue you are reporting, we are continuously following this 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,
Preethika Selvam.
gh2077 3.zip