Charts: As of v26.2.9, x-axis shows major ticks and grid line between columns

pamtbaau commented 1 month ago

Bug description

When upgrading from v26.1.35 to v26.1.35 the major ticks and grid lines are off. Instead of showing these at the column, it shows them between the columns. Since my x-axis are years like 2009, 2010...2023 the ticks are now shown as 2008.5, 2009.5 etc.

Steps to reproduce

Create new flutter project: flutter create bugtest --platform= windows

Replace class _MyHomePageState with:

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
  final List<ChartData> chartData = [
    ChartData(2009, 09),
    ChartData(2010, 10),
    ChartData(2011, 11),
    ChartData(2012, 12),
    ChartData(2013, 13),
    ChartData(2014, 14),
    ChartData(2015, 15),
    ChartData(2016, 16),
    ChartData(2017, 17),
    ChartData(2018, 18),
    ChartData(2019, 19),
    ChartData(2020, 20),
    ChartData(2021, 21),
    ChartData(2022, 22),
    ChartData(2023, 23),

  ];
  return Scaffold(
    body: Center(
      child: SfCartesianChart(
        series: <CartesianSeries<ChartData, int>>[
          ColumnSeries<ChartData, int>(
            dataSource: chartData,
            xValueMapper: (ChartData data, _) => data.x,
            yValueMapper: (ChartData data, _) => data.y,
          ),
        ],
      ),
    ),
  );
}
}

class ChartData {
ChartData(this.x, this.y);
final int x;
final double y;
}

Add dependency: syncfusion_flutter_charts: 26.1.35
Run app. The chart will show the following labels:
Replace dependency with: syncfusion_flutter_charts: 26.2.9
Run app. The chart will show the following labels:
Upgrade Flutter/Dart to latest + Upgrade syncfusion_flutter_chart to latest
Still same problem.

Code sample

```dart [Add your code here] ```

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Stack Traces

```dart [Add the Stack Traces here] ```

On which target platforms have you observed this bug?

Windows

Flutter Doctor output

Doctor output

```console Development/Flutter $ flutter doctor -v [✓] Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.22631.4317], locale nl-NL) • Flutter version 3.22.2 on channel stable at C:\DevTools\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 761747bfc5 (5 months ago), 2024-06-05 22:15:13 +0200 • Engine revision edd8546116 • Dart version 3.4.3 • DevTools version 2.34.3 [✓] Windows Version (Installed version of Windows is version 10 or higher) [✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) • Android SDK at C:\Users\Lex\AppData\Local\Android\Sdk • Platform android-34, build-tools 35.0.0 • ANDROID_SDK_ROOT = C:\Users\Lex\AppData\Local\Android\Sdk • Java binary at: C:\Program Files\Android\Android Studio1\jbr\bin\java • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314) • All Android licenses accepted. [✓] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe [✓] Visual Studio - develop Windows apps (Visual Studio Build Tools 2022 17.6.4) • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools • Visual Studio Build Tools 2022 version 17.6.33815.320 • Windows 10 SDK version 10.0.22000.0 [!] Android Studio (version 2022.2) • Android Studio at C:\Program Files\Android\Android Studio • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart ✗ Unable to determine bundled Java version. • Try updating or re-installing Android Studio. [✓] Android Studio (version 2024.1) • Android Studio at C:\Program Files\Android\Android Studio1 • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314) [✓] VS Code (version 1.94.2) • VS Code at C:\Users\Lex\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.98.0 [✓] Connected device (3 available) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22631.4317] • Chrome (web) • chrome • web-javascript • Google Chrome 130.0.6723.58 • Edge (web) • edge • web-javascript • Microsoft Edge 128.0.2739.42 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```

KompelliSravanSyncfusion commented 3 weeks ago

Hi @pamtbaau,

We have thoroughly reviewed the differences in how axis labels, ticks, and grid lines behave across versions in numeric axis. From v23.2.7 to v26.2.9, we made changes to improve the alignment of axis labels and ticks, but these updates caused an issue with decimal labels not displaying correctly.

To fix this, we rolled back those changes in v26.2.9 and later versions, restoring the original behavior. Now, in the latest version v27.1.56, the axis labels, ticks, and grid lines align as expected without any issues with decimal labels. So if you're using v26.2.9 or v27.1.56, everything should display correctly as it did originally.

If you would like to place labels and tick lines at the bottom of each column segment without decimals, consider using the category axis and set labelPlacement to LabelPlacement.onTicks. However, note that LabelPlacement.onTicks may cause segments to be clipped at the start and end. To avoid this, you can set rangePadding to RangePadding.additional to ensure the entire chart, including all segments, remains visible. For additional information, refer to the UG links:

User guide links:

Category axis: https://help.syncfusion.com/flutter/cartesian-charts/axis-types#category-axis Placing label between the ticks : https://help.syncfusion.com/flutter/cartesian-charts/axis-types#placing-labels-between-the-ticks Apply padding to range: https://help.syncfusion.com/flutter/cartesian-charts/axis-types#applying-padding-to-the-range

Code snippet:

primaryXAxis: const CategoryAxis(
  labelPlacement: LabelPlacement.onTicks,
  rangePadding: ChartRangePadding.additional,
),

Demo: Screenshot 2024-11-01 180131

If you have any further queries, Please feel free to reach us out.

Best regards, Kompelli Sravan Kumar.

pamtbaau commented 3 weeks ago

Thank you for the investigation, the work and the detailed description. However...

So if you're using v26.2.9 or v27.1.56, everything should display correctly as it did originally

The problem still exists when using v27.1.57.

In the meantime, I will explore your CategoryAxis suggestion.

pamtbaau commented 3 weeks ago

Tried your suggestion using the CategoryAxis and it is working fine.

I did however made a little change to the padding by using rangePadding: ChartRangePadding.normal, instead:

primaryXAxis: const CategoryAxis(
  labelPlacement: LabelPlacement.onTicks,
  rangePadding: ChartRangePadding.normal,
),

This will give a slighter smaller padding on both sided (half the width between columns?) which is a bit more balanced IMHO.

{F69BC02B-9E7B-4A44-A781-F85B5C293759}

KompelliSravanSyncfusion commented 3 weeks ago

Hi @pamtbaau ,

We are glad to hear that the category axis setup with rangePadding: ChartRangePadding.normal meets your design preference.

To clarify, in v26.2.9 and later versions, the NumericAxis behavior you are observing is actually the expected output. We initially introduced changes in v23.2.7 to adjust label and tick alignment, but this caused issues with decimal labels. As a result, we rolled back those changes in v26.2.9 to avoid axis decimal issues, restoring the original alignment where major ticks, axis labels and grid lines can appear between data points.

This is why, for aligning axis labels and ticks directly at the bottom of column segment without decimals (as in years like 2009, 2010, etc.), we recommended using the category axis with labelPlacement: LabelPlacement.onTicks. This configuration ensures ticks are displayed exactly on each data point, achieving your requirement without decimal values. Let us know if you have further questions.

Regards, Kompelli Sravan Kumar.

pamtbaau commented 3 weeks ago

Hi @KompelliSravanSyncfusion,

I'm fine with your suggested solution and explanation. I'm therefor closing the issue. Thank you for the efforts taken.

syncfusion / flutter-widgets