1. Feedback
  2. Flutter
  3. 50382

Welcome to the Flutter feedback portal. We’re happy you’re here! If you have feedback on how to improve the Flutter, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Columns have wrong width, if there are only two of them and a gap

Same use case, as described in https://www.syncfusion.com/feedback/50381, but this time there are 2 values and a gap between them: columns are scaled to the wrong width. Only when all three values are present in the example below the bars are scaled correctly.


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

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

class _ChartApp extends StatelessWidget {
@override
 Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
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> {
late List<_ChartData> data;
late TooltipBehavior _tooltip;

@override
 void initState() {
data = [
_ChartData(DateTime(2024, 1, 1), 12),
// _ChartData(DateTime(2024, 3, 1), 19),
              _ChartData(DateTime(2024, 4, 1), 22),
];
_tooltip = TooltipBehavior(enable: true);
super.initState();
}

@override
 Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter chart'),
),
body: SfCartesianChart(
primaryXAxis: DateTimeAxis(
minimum: DateTime(2023, 12, 1),
maximum: DateTime(2025, 1, 1),
edgeLabelPlacement: EdgeLabelPlacement.hide,
majorGridLines: const MajorGridLines(width: 0),
),
primaryYAxis: const NumericAxis(minimum: 0, maximum: 40, interval: 10),
tooltipBehavior: _tooltip,
series: <CartesianSeries<_ChartData, DateTime>>[
ColumnSeries<_ChartData, DateTime>(
// width: 0.8,
 animationDuration: 0,
dataSource: data,
xValueMapper: (_ChartData data, _) => data.x,
yValueMapper: (_ChartData data, _) => data.y,
name: 'Test',
color: const Color.fromRGBO(8, 142, 255, 1))
]));
}
}

class _ChartData {
_ChartData(this.x, this.y);

final DateTime x;
final double y;
}