ColumnSeries not displayed correctly, have bug based on different data

[ImanGhasemiArani]

Bug description

see test record

Steps to reproduce

see test 1 and 2 and their data.
but see test 3.

test 3 is correct, but test 1 and 2 are not correct in displaying the chart.
The current problem is that the bars are shown in different sizes in each case. Here I gave 3 data sets as an example. Which is what I expect is the last one. In the first and second cases, the bars are too big and this is not acceptable.
I want the bars to be displayed as in the third case, no matter how many data I give to the chart.

Code sample

Test 1 (bug)

series: [
        ColumnSeries<ChartData, double>(
          animationDuration: 1500,
          dataSource: [
            ChartData(x: 0, y: 95),
            ChartData(x: 10, y: 100),
            ChartData(x: 23, y: 93),
          ],
          xValueMapper: (data, _) => data.x.toDouble(),
          yValueMapper: (data, _) => data.y,
          width: 0.5,
          borderRadius: widget.isRounded
              ? const BorderRadius.vertical(top: Radius.circular(50))
              : BorderRadius.zero,
          color: widget.color,
          pointColorMapper: (data, _) => widget.colorResolver?.call(data),
          gradient: widget.gradient
              ? LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    widget.color!,
                    widget.color!.withOpacity(0.5),
                  ],
                )
              : null,
        ),
      ],

Test 2 (bug)

          dataSource: [
            ChartData(x: 0, y: 95),
            ChartData(x: 10, y: 100),
            ChartData(x: 13, y: 93),
            ChartData(x: 23, y: 93),
          ],
         

Test 3 (expected)

          dataSource: [
            ChartData(x: 0, y: 95),
            ChartData(x: 10, y: 100),
            ChartData(x: 11, y: 93),
            ChartData(x: 23, y: 93),
          ],
         

Screenshots or Video

Screenshots test 1 (bug)

Screenshots test 2 (bug)

Screenshots test 3 (expected)

Stack Traces

Stack Traces

-

On which target platforms have you observed this bug?

Android

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.24.5, on Ubuntu 23.04 6.5.0-14-generic, locale
    en_US.UTF-8)
    • Flutter version 3.24.5 on channel stable at
      /home/casper/snap/flutter/common/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision dec2ee5c1f (5 weeks ago), 2024-11-13 11:13:06 -0800
    • Engine revision a18df97ca5
    • Dart version 3.5.4
    • DevTools version 2.37.3

[✓] Android toolchain - develop for Android devices (Android SDK version
    36.0.0-rc1)
    • Android SDK at /home/casper/Development/Android/Sdk/
    • Platform android-35, build-tools 36.0.0-rc1
    • Java binary at: /home/casper/.jdks/jbr-17.0.9/bin/java
    • Java version OpenJDK Runtime Environment JBR-17.0.9+8-1166.2-nomod (build
      17.0.9+8-b1166.2)
    • All Android licenses accepted.

[✓] Android Studio (version 2024.2)
    • Android Studio at /opt/android-studio-2024.2.1.10-linux/android-studio
    • Flutter plugin version 82.0.3
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.3+-12282718-b509.11)

[✓] IntelliJ IDEA Ultimate Edition (version 2024.1)
    • IntelliJ at /opt/JetBrains.IntelliJ.IDEA.2023.3.6/idea-IU-233.15026.9
    • Flutter plugin version 79.0.3
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.96.0)
    • VS Code at /usr/share/code
    • Flutter extension version 3.102.0

[✓] Connected device (1 available)
    • SM A042F (mobile) • R83W50FKG6Y • android-arm64 • Android 14 (API 34)

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[BPraveenBalu]

Hi @ImanGhasemiArani ,

We have reviewed the mentioned behavior at our end and we recommend using the plotOffset property in the primary axis. This property provides additional padding at the start and end of the plot area, ensuring that the full column series is displayed correctly at both ends of the plot area.

Additionally, you can use the plotOffsetStart property to add padding at the start of the plot area and the plotOffsetEnd property to add padding at the end.

Code snippet:

SfCartesianChart(
  primaryXAxis: NumericAxis(
    minimum: 0,
    maximum: 23,
    plotOffset: 50,
    // Add space only to the start of the plot area
    // plotOffsetStart: 20
    // Add space only to the end of the plot area
    // plotOffsetEnd: 20
  ),
  series: [
    ColumnSeries(
      ...
    )
  ],
)

For further details, we have provided a link to the user guide (UG) documentation and included a demo and sample for your reference.

UG link: https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#offset-the-rendering.
Demo and sample: 668443.zip

Regards,
Praveen balu.

[ImanGhasemiArani]

hi @BPraveenBalu

Thank you for your response. But the problem is not showing part of the bar at the beginning and end of the chart. This problem is solved by what you said and I solved it before.
The current problem is that the bars are shown in different sizes in each case. Here I gave 3 data sets as an example. Which is what I expect is the last one. In the first and second cases, the bars are too big and this is not acceptable.
I want the bars to be displayed as in the third case, no matter how many data I give to the chart.

Regards,
Iman Ghasemi Arani