Two RangeColumnSeries are not vertically aligned

[Ashutosh-Rana]

Bug description

Using two RangeColumnSeries in the series results in the first series points being displayed on the left and the second series points on the right.

Steps to reproduce

use two RangeColumnSeries and check their vertical alignment.

Code sample

series: [
RangeColumnSeries<_BPRangeData, DateTime>(
dataSource: _getChartData(systolicData),
xValueMapper: (_BPRangeData data, _) => data.x,
lowValueMapper: (_BPRangeData data, _) => data.low,
highValueMapper: (_BPRangeData data, _) => data.high,
color: AppColors.status.shade700,
width: 0.1,
name: 'Systolic',
markerSettings: MarkerSettings(
isVisible: true,
shape: DataMarkerType.diamond,
height: 10,
width: 10,
borderWidth: 2,
color: AppColors.base.shade01,
borderColor: AppColors.status.shade700,
),
spacing: 0,
),
RangeColumnSeries<_BPRangeData, DateTime>(
dataSource: _getChartData(diastolicData),
xValueMapper: (_BPRangeData data, _) => data.x,
lowValueMapper: (_BPRangeData data, _) => data.low,
highValueMapper: (_BPRangeData data, _) => data.high,
color: AppColors.orange,
name: 'Diastolic',
width: 0.1,
spacing: 0,
markerSettings: MarkerSettings(
isVisible: true,
shape: DataMarkerType.circle,
height: 10,
width: 10,
borderWidth: 2,
color: AppColors.base.shade01,
borderColor: AppColors.orange,
),
],

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Stack Traces

Stack Traces

NA

On which target platforms have you observed this bug?

Web

Flutter Doctor output

spurge@SPURGEs-MacBook-Air ahc_provider % flutter doctor -v
[✓] Flutter (Channel stable, 3.22.2, on macOS 15.0 24A335 darwin-arm64, locale en-IN)
• Flutter version 3.22.2 on channel stable at /Users/spurge/fvm/versions/3.22.2
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 761747bfc5 (7 months ago), 2024-06-05 22:15:13 +0200
• Engine revision edd8546116
• Dart version 3.4.3
• DevTools version 2.34.3

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/spurge/Library/Android/sdk
✗ cmdline-tools component is missing
Run path/to/sdkmanager --install "cmdline-tools;latest"
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run flutter doctor --android-licenses to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✗] Xcode - develop for iOS and macOS
✗ Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.
Download at: https://developer.apple.com/xcode/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1)
• Android Studio at /Applications/Android Studio.app/Contents
• 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-17.0.11b1207.24-11852314)

[✓] IntelliJ IDEA Community Edition (version 2024.2.3)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• 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

[✓] VS Code (version 1.95.3)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.102.0

[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 15.0 24A335 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 131.0.6778.205

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

[Baranibharathip]

Hi Ashutosh-Rana,

You can achieve your requirement by setting the enableSideBySideSeriesPlacement property to false, which is available in the SfCartesianChart. We have shared user guide documentation for your reference.

UG link: https://help.syncfusion.com/flutter/cartesian-charts/chart-types/column-chart#side-by-side-series-placement

Demo :

Regards,
Baranibharathi P.