Skip to content

[syncfusion_flutter_charts] Columns too thin if only a single one #2383

Open
@DrNiels

Description

@DrNiels

Bug description

I want to display a ColumnSeries or StackedColumnSeries with monthly data. Everything works as intended if there are multiple values. But if there's only a single value, the corresponding column is extremely thin. I would expect it to be the same than with multiple values. I suppose the value interval is unknown if there's only a single value, but I would assume that a single tick on the x axis would be a good heuristic.

Steps to reproduce

  1. Run the code sample
  2. Compare the series with one or two datasets
  3. See that series with single dataset have very thin columns

Code sample

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

void main() async {
  runApp(
    MaterialApp(
      home: TestChart(),
    ),
  );
}

class TestChart extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TestChartState();
}

class TestChartState extends State<TestChart> {
  late RangeController rangeController;

  @override
  void initState() {
    super.initState();

    rangeController = RangeController(
      start: DateTime(2025, 1, 1),
      end: DateTime(2026, 1, 1),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: SfCartesianChart(
            primaryYAxis: NumericAxis(),
            primaryXAxis: DateTimeAxis(
              minimum: DateTime(2000),
              maximum: DateTime(
                2031,
              ),
              initialVisibleMinimum: this.rangeController.start,
              initialVisibleMaximum: this.rangeController.end,
              rangeController: this.rangeController,
              intervalType: DateTimeIntervalType.months,
            ),
            series: [
              StackedColumnSeries<num, DateTime>(
                dataSource: [3],
                xValueMapper: (num source, int index) {
                  return DateTime(2025, source.toInt(), 1);
                },
                yValueMapper: (num source, int index) {
                  return 57.44004;
                },
              )
            ],
          ),
        ),
        Expanded(
          child: SfCartesianChart(
            primaryYAxis: NumericAxis(),
            primaryXAxis: DateTimeAxis(
              minimum: DateTime(2000),
              maximum: DateTime(
                2031,
              ),
              initialVisibleMinimum: this.rangeController.start,
              initialVisibleMaximum: this.rangeController.end,
              rangeController: this.rangeController,
              intervalType: DateTimeIntervalType.months,
            ),
            series: [
              StackedColumnSeries<num, DateTime>(
                dataSource: [3, 4],
                xValueMapper: (num source, int index) {
                  return DateTime(2025, source.toInt(), 1);
                },
                yValueMapper: (num source, int index) {
                  return 57.44004;
                },
              )
            ],
          ),
        ),
        Expanded(
          child: SfCartesianChart(
            primaryYAxis: NumericAxis(),
            primaryXAxis: DateTimeAxis(
              minimum: DateTime(2000),
              maximum: DateTime(
                2031,
              ),
              initialVisibleMinimum: this.rangeController.start,
              initialVisibleMaximum: this.rangeController.end,
              rangeController: this.rangeController,
              intervalType: DateTimeIntervalType.months,
            ),
            series: [
              ColumnSeries<num, DateTime>(
                dataSource: [3],
                xValueMapper: (num source, int index) {
                  return DateTime(2025, source.toInt(), 1);
                },
                yValueMapper: (num source, int index) {
                  return 57.44004;
                },
              )
            ],
          ),
        ),
        Expanded(
          child: SfCartesianChart(
            primaryYAxis: NumericAxis(),
            primaryXAxis: DateTimeAxis(
              minimum: DateTime(2000),
              maximum: DateTime(
                2031,
              ),
              initialVisibleMinimum: this.rangeController.start,
              initialVisibleMaximum: this.rangeController.end,
              rangeController: this.rangeController,
              intervalType: DateTimeIntervalType.months,
            ),
            series: [
              ColumnSeries<num, DateTime>(
                dataSource: [3, 4],
                xValueMapper: (num source, int index) {
                  return DateTime(2025, source.toInt(), 1);
                },
                yValueMapper: (num source, int index) {
                  return 57.44004;
                },
              )
            ],
          ),
        ),
      ],
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Image

Stack Traces

Stack Traces

Not applicable, no error is thrown

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.32.0, on Microsoft Windows [Version 10.0.19045.5965], locale de-DE) [718ms]
• 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 (5 weeks 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) [4,9s]

[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [3,9s]
• 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)
• All Android licenses accepted.

[√] Chrome - develop for the web [193ms]
• 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)) [192ms]
• 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) [32ms]
• 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) [29ms]
• 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) [27ms]
• VS Code at C:\Program Files\Microsoft VS Code
• Flutter extension version 3.112.0

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

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

! Doctor found issues in 1 category.

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