Skip to content

[syncfusion_flutter_charts] SplineAreaSeries with extreme value difference does not align line and area #2429

@DrNiels

Description

@DrNiels

Bug description

With a SplineAreaSeries that has an extreme y value outside of the defined range of the y axis, the line and area can differ and have some space between them.

Steps to reproduce

  1. Load the sample
  2. See a gap between line and area at July 2022

Code sample

Code sample
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

void main() {
  return runApp(_ChartApp());
}

class _ChartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: false),
      home: _MyHomePage(),
    );
  }
}

class _MyHomePage extends StatefulWidget {
  // ignore: prefer_const_constructors_in_immutables
  _MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<_MyHomePage> {
  List<_SalesData> data = [
    _SalesData(DateTime(2021, 7), 478855.8),
    _SalesData(DateTime(2022, 7), 720.4),
    _SalesData(DateTime(2023, 7), 573.3),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Syncfusion Flutter chart')),
      body: SfCartesianChart(
        primaryXAxis: DateTimeAxis(
          minimum: DateTime(2021),
          maximum: DateTime(2024),
        ),
        primaryYAxis: NumericAxis(minimum: 0, maximum: 3680, interval: 200),
        // Enable tooltip
        tooltipBehavior: TooltipBehavior(enable: true),
        series: <CartesianSeries<_SalesData, DateTime>>[
          SplineAreaSeries<_SalesData, DateTime>(
            color: Colors.amber.withValues(alpha: 0.5),
            borderColor: Colors.red,
            splineType: SplineType.monotonic,
            dataSource: data,
            xValueMapper: (_SalesData sales, _) => sales.year,
            yValueMapper: (_SalesData sales, _) => sales.sales,
          ),
        ],
      ),
    );
  }
}

class _SalesData {
  _SalesData(this.year, this.sales);

  final DateTime year;
  final double sales;
}

Screenshots or Video

Screenshots / Video demonstration Image

Stack Traces

Stack Traces

No error thrown

On which target platforms have you observed this bug?

Web, Windows

Flutter Doctor output

Doctor output
[√] Flutter (Channel stable, 3.32.0, on Microsoft Windows [Version 10.0.19045.6216], locale de-DE) [527ms]
    • Flutter version 3.32.0 on channel stable at C:\Users\Niels\Documents\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision be698c48a6 (4 months ago), 2025-05-19 12:59:14 -0700     
    • Engine revision 1881800949
    • Dart version 3.8.0
    • DevTools version 2.45.1

[√] Windows Version (10 Education 64-bit, 22H2, 2009) [3,0s]

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [3,2s]
    • Android SDK at C:\Users\Niels\AppData\Local\Android\Sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: C:\Program Files\Android\Android Studio1\jbr\bin\java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[√] Chrome - develop for the web [114ms]
    • Chrome at C:\Users\Niels\AppData\Local\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.14.6 (June 2025)) [112ms]
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.14.36212.18
    • Windows 10 SDK version 10.0.26100.0

[!] Android Studio (version 2021.2) [25ms]
    • 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
    X Unable to determine bundled Java version.
    • Try updating or re-installing Android Studio.

[√] Android Studio (version 2024.1) [23ms]
    • 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, 64-bit edition (version 1.96.0) [22ms]
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.118.0

[√] Connected device (3 available) [360ms]
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.6216]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 139.0.7258.155
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 128.0.2739.42

[√] Network resources [730ms]
    • All expected network resources are available.

! Doctor found issues in 2 categories.

Metadata

Metadata

Assignees

No one assigned

    Labels

    chartsCharts componentopenOpen

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions