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.

[Ashutosh-Rana]

Thank you, it is working.
I wanted to show different trackball colors for each systolic and diastolic points when hovered but it is not happening.
Please find attached the screenshot for your reference.

return TrackballBehavior(
      enable: true,
      activationMode: ActivationMode.singleTap,
      tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
      tooltipAlignment: ChartAlignment.near,
      shouldAlwaysShow: true,
      lineColor: AppColors.grey.shade600,
      markerSettings: TrackballMarkerSettings(
        markerVisibility: TrackballVisibilityMode.visible,
        shape: DataMarkerType.diamond,
        height: 10,
        width: 10,
        borderWidth: 1,
        color: AppColors.status.shade700, // I want to make this color dynamic
        borderColor: AppColors.status.shade50,
      ),
      builder: builder,
    );

[skbansal5642]

I am also thinking of the same to add in my share market app. But could not find any way.

@Baranibharathip , Please suggest if there is any possibility for adding trackballs with different colours.

[Baranibharathip]

Hi @Ashutosh-Rana,

We have reviewed your query and would like to inform you that you can achieve your requirement by using a custom trackballBehavior. By utilizing the onPaint method, you can draw a custom marker on the trackball line. We have provided a code snippet and demo for your reference.

@override
  Widget build(BuildContext context) {
    return SfCartesianChart(
        trackballBehavior: _TrackballBehavior(),
            ....
        

class _TrackballBehavior extends TrackballBehavior {
  @override
  bool get enable => true;

  @override
  ActivationMode get activationMode => ActivationMode.singleTap;

  @override
  TrackballDisplayMode get tooltipDisplayMode =>
      TrackballDisplayMode.groupAllPoints;

  @override
  TrackballMarkerSettings? get markerSettings => const TrackballMarkerSettings(
        markerVisibility: TrackballVisibilityMode.visible,
        shape: DataMarkerType.diamond,
        borderWidth: 1,
      );

  @override
  void onPaint(PaintingContext context, Offset offset,
      SfChartThemeData chartThemeData, ThemeData themeData) {
    if (chartPointInfo.isEmpty || parentBox == null) {
      return;
    }
    super.onPaint(context, offset, chartThemeData, themeData);
    final Paint fillPaint = Paint()..style = PaintingStyle.fill;
    const Size lineMarkerSize = Size(15, 15);
    final translatePos =
        Offset(-lineMarkerSize.width / 2, -lineMarkerSize.height / 2);
    if (chartPointInfo.isNotEmpty) {
      final int length = chartPointInfo.length;
      for (int i = 0; i < length; i++) {
        fillPaint.color = chartPointInfo[i].color!;
        // High position.
        Offset position =
            Offset(chartPointInfo[i].xPosition!, chartPointInfo[i].yPosition!);
        paint(
          canvas: context.canvas,
          rect: position.translate(translatePos.dx, translatePos.dy) &
              lineMarkerSize,
          shapeType: ShapeMarkerType.diamond,
          paint: fillPaint,
        );
        // Low position.
        position = Offset(
            chartPointInfo[i].xPosition!, chartPointInfo[i].lowYPosition!);
        paint(
          canvas: context.canvas,
          rect: position.translate(translatePos.dx, translatePos.dy) &
              lineMarkerSize,
          shapeType: ShapeMarkerType.diamond,
          paint: fillPaint,
        );
      }
    }
  }
}

Demo :

Sample : GH_2287.zip

Regards,
Baranibharathi P.

[Saravanan-Madhesh]

Please reopen this ticket, if you need further assistance with this.