search

syncfusion / flutter-widgets

Syncfusion Flutter widgets libraries include high quality UI widgets and file-format packages to help you create rich, high-quality applications for iOS, Android, and web from a single code base.
1.59k stars 781 forks source link

[SfCartesianChart] Thin bar width issue when displaying `Multiple` ColumnSeries despite setting `autoScrollingDelta` which increases ColumnSeries section width #2126

Open petermusembi69 opened 1 month ago

petermusembi69 commented 1 month ago

Bug description

There is an issue with the width of the bars in multiple column series, while using CategoryAxis as my primaryXAxis, As shown in the screenshots attached, the width of the bar(s) does'nt scale despite the width of the column series section increasing after setting autoScrollingDelta and making the chart scrollable.

Issue 1

From several test, the width of the bars in multiple Cartesian Chart decrease as the number of column series increases, but this should also put into consideration the autoScrollingDelta value.

If autoScrollingDelta is provided, the width of the bars in multiple Cartesian Chart should decrease based on the autoScrollingDelta.

Issue 2

The column series as per the data set is about 50, which each series has about 1 to 7 bar, with this dataset some UI junk(Performance issue) is experienced.

Steps to reproduce

  1. Create a Multiple ColumnSeries
  2. Adjust a number of column series(e.g 20)
  3. Adjust autoScrollingDelta(e.g 2, 5, 10)
  4. The bar width remain the same despite reducing autoScrollingDelta

Code sample

Code sample ```dart return SfCartesianChart( key: widget.barKey, zoomPanBehavior: ZoomPanBehavior( enablePanning: true, zoomMode: ZoomMode.x, ), primaryXAxis: CategoryAxis( // Show only 5 column series sections (scrollable) autoScrollingDelta: 5 , autoScrollingMode: AutoScrollingMode.start, title: AxisTitle( text: widget.barGraphReport.xAxis.name, textStyle: TextStyle( fontSize: widget.isPreview ? 7 : 11.98, fontFamily: 'Helvetica Neue', fontWeight: FontWeight.w500, color: AppTheme.appTheme(context).kAccent5GreyColor, ), ), majorGridLines: const MajorGridLines(width: 0), ), primaryYAxis: NumericAxis( title: AxisTitle( text: widget.barGraphReport.yAxis?.name ?? '', textStyle: TextStyle( fontSize: widget.isPreview ? 7 : 11.98, fontFamily: 'Helvetica Neue', fontWeight: FontWeight.w500, color: AppTheme.appTheme(context).kAccent5GreyColor, ), ), numberFormat: NumberFormat.compact(), labelFormat: '', axisLine: const AxisLine(width: 0), majorTickLines: const MajorTickLines(color: Colors.transparent), ), series: _getDefaultColumnSeries(), ); } List> _getDefaultColumnSeries() { return >[ for (final (index, bar) in widget.barGraphReport.values.firstOrNull ?.multipleBarGraphValues.indexed ?? [].indexed) // Increasing and descreasing the nummber of Column Series // will affect the width of the bars // if (index < 5) ColumnSeries( dataSource: bar.values, xValueMapper: (BarGraphValue i, _) => i.name ?? '', yValueMapper: (BarGraphValue i, _) => i.total ?? i.count ?? 0, name: bar.name, dataLabelSettings: const DataLabelSettings(isVisible: true), pointColorMapper: (BarGraphValue val, _) => Colors.primaries[val.color ?? 0], width: 1, spacing: 0.5, ), ]; } } ```
Model sample ```dart @freezed class BarGraphValue with _$BarGraphValue { const factory BarGraphValue({ String? name, double? percentage, double? total, int? color, }) = _BarGraphValue; factory BarGraphValue.fromJson(Map json) => _$BarGraphValueFromJson(json); } @freezed class MultipleBarGraphValues with _$MultipleBarGraphValues { const factory MultipleBarGraphValues({ @Default([]) List values, String? name, }) = _MultipleBarGraphValues; factory MultipleBarGraphValues.fromJson(Map json) => _$MultipleBarGraphValuesFromJson(json); } ```
Sample Json Data ```json "visualizationData": [ { "name": "Zuri Sana Restaurant", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.53, "value": 5.4e4 }, { "name": "Chips 12mm*12mm", "percentage": 0.36, "value": 37250.0 }, { "name": "Wedges", "percentage": 0.0, "value": 480.0 } ] }, { "name": "Viken -148", "values": [ { "name": "Chips 12mm*12mm", "percentage": 0.03, "value": 3480.0 } ] }, { "name": "Vihar Cafe", "values": [ { "name": "Chips 12mm*12mm", "percentage": 0.01, "value": 1.2e3 } ] }, { "name": "Tripoint Pizzeria", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.14, "value": 14160.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.07, "value": 6840.0 } ] }, { "name": "The Hub Karen", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.67, "value": 68250.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.08, "value": 8450.0 } ] }, { "name": "Teagoni Tea Farm", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.03, "value": 3.0e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.04, "value": 3.6e3 } ] }, { "name": "Steadmak Hotel & Resort -Karen", "values": [ { "name": "Chips 10mm*10mm", "percentage": 1.28, "value": 1.314e5 }, { "name": "Chips 12mm*12mm", "percentage": 0.06, "value": 6.6e3 } ] }, { "name": "Saifee Park", "values": [ { "name": "Chips 12mm*12mm", "percentage": 0.11, "value": 11250.0 } ] }, { "name": "Royal Bistro", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.07, "value": 7.2e3 } ] }, { "name": "Robot Cafe", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.02, "value": 2.5e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.01, "value": 880.0 } ] }, { "name": "Roast Tatu city", "values": [ { "name": "Chips 10mm*10mm", "percentage": 1.25, "value": 1.285e5 }, { "name": "Chips 12mm*12mm", "percentage": 0.06, "value": 6.5e3 } ] }, { "name": "Rhubarb Delicacies", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.01, "value": 1.1e3 } ] }, { "name": "Rhapsody Delicacies", "values": [ { "name": "Chips 10mm*10mm", "percentage": 3.14, "value": 3.218e5 }, { "name": "Chips 12mm*12mm", "percentage": 1.74, "value": 178875.0 } ] }, { "name": "Remy-Home Delivery", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.05, "value": 4.8e3 } ] }, { "name": "Red Hill Karting", "values": [ { "name": "Chips 12mm*12mm", "percentage": 0.36, "value": 3.72e4 } ] }, { "name": "RED GIANT MEDIA", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.32, "value": 3.25e4 }, { "name": "Chips 12mm*12mm", "percentage": 2.47, "value": 2.535e5 } ] }, { "name": "Radisson Blu- Aboretum\n(Leisure Development Park)", "values": [ { "name": "Chips 12mm*12mm", "percentage": 1.74, "value": 1.789e5 } ] }, { "name": "Quickmart Westlands", "values": [ { "name": "Lyonnaise", "percentage": 0.7, "value": 72050.0 }, { "name": "Whole Peeled", "percentage": 0.02, "value": 1650.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.62, "value": 6.38e4 } ] }, { "name": "Quickmart Waiyaki", "values": [ { "name": "Lyonnaise", "percentage": 0.16, "value": 1.65e4 }, { "name": "Whole Peeled", "percentage": 0.1, "value": 10450.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.29, "value": 30250.0 } ] }, { "name": "Quickmart Tom Mboya", "values": [ { "name": "Lyonnaise", "percentage": 0.33, "value": 3.41e4 }, { "name": "Chips 12mm*12mm", "percentage": 0.21, "value": 2.2e4 } ] }, { "name": "Quickmart Tmall", "values": [ { "name": "Lyonnaise", "percentage": 0.42, "value": 4.29e4 }, { "name": "Whole Peeled", "percentage": 0.14, "value": 1.43e4 }, { "name": "Chips 12mm*12mm", "percentage": 0.77, "value": 79310.0 } ] }, { "name": "Quickmart Thome", "values": [ { "name": "Lyonnaise", "percentage": 0.02, "value": 2.2e3 }, { "name": "Whole Peeled", "percentage": 0.02, "value": 2.2e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.04, "value": 4.4e3 } ] }, { "name": "Quickmart Ruiru", "values": [ { "name": "Lyonnaise", "percentage": 0.59, "value": 6.05e4 }, { "name": "Whole Peeled", "percentage": 0.29, "value": 30250.0 }, { "name": "Chips 12mm*12mm", "percentage": 1.13, "value": 116050.0 } ] }, { "name": "Quickmart Ruaka", "values": [ { "name": "Lyonnaise", "percentage": 0.04, "value": 4.4e3 }, { "name": "Whole Peeled", "percentage": 0.01, "value": 550.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.11, "value": 1.1e4 } ] }, { "name": "Quickmart Ruai", "values": [ { "name": "Lyonnaise", "percentage": 0.85, "value": 8.69e4 }, { "name": "Whole Peeled", "percentage": 0.04, "value": 4.4e3 }, { "name": "Chips 12mm*12mm", "percentage": 1.86, "value": 1.903e5 }, { "name": "Wedges", "percentage": 0.17, "value": 1.76e4 } ] }, { "name": "Quickmart Roysambu", "values": [ { "name": "Lyonnaise", "percentage": 0.34, "value": 3.52e4 }, { "name": "Chips 12mm*12mm", "percentage": 0.48, "value": 4.95e4 } ] }, { "name": "Quickmart Mombasa Rd", "values": [ { "name": "Lyonnaise", "percentage": 0.34, "value": 3.52e4 }, { "name": "Whole Peeled", "percentage": 0.11, "value": 11550.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.33, "value": 3.41e4 } ] }, { "name": "Quickmart Mfangano", "values": [ { "name": "Lyonnaise", "percentage": 0.18, "value": 18150.0 }, { "name": "Whole Peeled", "percentage": 0.08, "value": 7810.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.4, "value": 41250.0 } ] }, { "name": "Quickmart Lavington", "values": [ { "name": "Lyonnaise", "percentage": 1.24, "value": 127270.0 }, { "name": "Whole Peeled", "percentage": 0.35, "value": 35750.0 }, { "name": "Chips 12mm*12mm", "percentage": 1.73, "value": 177650.0 } ] }, { "name": "Quickmart Kilimani", "values": [ { "name": "Lyonnaise", "percentage": 1.22, "value": 1.254e5 }, { "name": "Whole Peeled", "percentage": 0.23, "value": 2.31e4 }, { "name": "Chips 12mm*12mm", "percentage": 1.36, "value": 139150.0 } ] }, { "name": "Quickmart Kileleshwa", "values": [ { "name": "Lyonnaise", "percentage": 1.23, "value": 125950.0 }, { "name": "Whole Peeled", "percentage": 0.32, "value": 3.3e4 }, { "name": "Chips 12mm*12mm", "percentage": 1.51, "value": 1.551e5 } ] }, { "name": "Quickmart Kikuyu", "values": [ { "name": "Lyonnaise", "percentage": 0.11, "value": 11550.0 }, { "name": "Whole Peeled", "percentage": 0.02, "value": 1650.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.38, "value": 3.85e4 } ] }, { "name": "Quickmart Karen Crossroads", "values": [ { "name": "Lyonnaise", "percentage": 0.06, "value": 6.6e3 }, { "name": "Whole Peeled", "percentage": 0.06, "value": 6.6e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.08, "value": 7.7e3 } ] }, { "name": "Quickmart Kahawa West", "values": [ { "name": "Lyonnaise", "percentage": 0.18, "value": 1.87e4 }, { "name": "Whole Peeled", "percentage": 0.02, "value": 1870.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.41, "value": 42350.0 } ] }, { "name": "Quickmart Embakasi", "values": [ { "name": "Lyonnaise", "percentage": 0.67, "value": 68750.0 }, { "name": "Whole Peeled", "percentage": 0.18, "value": 18150.0 }, { "name": "Chips 12mm*12mm", "percentage": 1.32, "value": 1.353e5 } ] }, { "name": "Quickmart Eastern Bypass 1", "values": [ { "name": "Lyonnaise", "percentage": 0.89, "value": 9.13e4 }, { "name": "Whole Peeled", "percentage": 0.09, "value": 8.8e3 }, { "name": "Chips 12mm*12mm", "percentage": 1.35, "value": 138050.0 } ] }, { "name": "Quickmart Chania", "values": [ { "name": "Lyonnaise", "percentage": 0.25, "value": 2.53e4 }, { "name": "Chips 12mm*12mm", "percentage": 0.5, "value": 51150.0 } ] }, { "name": "Quickmart Chaka", "values": [ { "name": "Lyonnaise", "percentage": 0.67, "value": 68750.0 }, { "name": "Whole Peeled", "percentage": 0.35, "value": 35750.0 }, { "name": "Chips 12mm*12mm", "percentage": 1.21, "value": 1.243e5 } ] }, { "name": "Quickmart Bypass 2", "values": [ { "name": "Lyonnaise", "percentage": 0.63, "value": 64350.0 }, { "name": "Whole Peeled", "percentage": 0.09, "value": 8.8e3 }, { "name": "Chips 12mm*12mm", "percentage": 1.09, "value": 111650.0 } ] }, { "name": "Quickamart Pioneer", "values": [ { "name": "Lyonnaise", "percentage": 0.27, "value": 2.75e4 }, { "name": "Whole Peeled", "percentage": 0.01, "value": 1.1e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.31, "value": 3.19e4 }, { "name": "Wedges", "percentage": 0.1, "value": 10450.0 } ] }, { "name": "Peponi School", "values": [ { "name": "Cubes", "percentage": 0.15, "value": 1.58e4 }, { "name": "Lyonnaise", "percentage": 0.3, "value": 3.03e4 }, { "name": "Whole Peeled", "percentage": 0.38, "value": 38950.0 }, { "name": "Chips 10mm*10mm", "percentage": 0.09, "value": 8.8e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.17, "value": 1.71e4 }, { "name": "Wedges", "percentage": 0.14, "value": 14350.0 } ] }, { "name": "Paulina Caterers LTD", "values": [ { "name": "Lyonnaise", "percentage": 0.04, "value": 3.6e3 }, { "name": "Chips 10mm*10mm", "percentage": 0.07, "value": 7.2e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.05, "value": 4.8e3 } ] }, { "name": "Papparoti Restaurant", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.87, "value": 88750.0 }, { "name": "Chips 12mm*12mm", "percentage": 1.2, "value": 123350.0 } ] }, { "name": "Nanyuki Prime Cuts", "values": [ { "name": "Chips 12mm*12mm", "percentage": 0.02, "value": 1.8e3 } ] }, { "name": "Naivas Waterfront", "values": [ { "name": "Lyonnaise", "percentage": 0.16, "value": 16170.0 }, { "name": "Chips 12mm*12mm", "percentage": 1.42, "value": 145750.0 }, { "name": "Wedges", "percentage": 0.19, "value": 19250.0 } ] }, { "name": "Naivas T-Square- Buruburu", "values": [ { "name": "Lyonnaise", "percentage": 0.07, "value": 6820.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.53, "value": 54428.0 }, { "name": "Wedges", "percentage": 0.08, "value": 8459.0 } ] }, { "name": "Naivas Ronald Ngala", "values": [ { "name": "Lyonnaise", "percentage": 0.08, "value": 8250.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.66, "value": 67730.0 }, { "name": "Wedges", "percentage": 0.08, "value": 7.7e3 } ] }, { "name": "Naivas Prestige", "values": [ { "name": "Lyonnaise", "percentage": 0.34, "value": 3.52e4 }, { "name": "Whole Peeled", "percentage": 0.01, "value": 550.0 }, { "name": "Chips 12mm*12mm", "percentage": 1.41, "value": 144650.0 }, { "name": "Wedges", "percentage": 0.33, "value": 3.41e4 } ] }, { "name": "Naivas Onestop", "values": [ { "name": "Lyonnaise", "percentage": 0.1, "value": 9.9e3 }, { "name": "Whole Peeled", "percentage": 0.05, "value": 4950.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.65, "value": 6.71e4 }, { "name": "Wedges", "percentage": 0.02, "value": 1650.0 } ] }, { "name": "Naivas Muindi Mbingu", "values": [ { "name": "Wedges with skin", "percentage": 0.01, "value": 550.0 }, { "name": "Lyonnaise", "percentage": 0.16, "value": 15950.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.6, "value": 6.16e4 }, { "name": "Wedges", "percentage": 0.13, "value": 1.32e4 } ] }, { "name": "Naivas Maiyan Mall", "values": [ { "name": "Lyonnaise", "percentage": 0.12, "value": 12650.0 }, { "name": "Chips 10mm*10mm", "percentage": 0.04, "value": 4.4e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.88, "value": 9.02e4 }, { "name": "Wedges", "percentage": 0.12, "value": 1.21e4 } ] }, { "name": "Naivas Lifestylee", "values": [ { "name": "Lyonnaise", "percentage": 0.2, "value": 20350.0 }, { "name": "Chips 12mm*12mm", "percentage": 1.29, "value": 131890.0 }, { "name": "Wedges", "percentage": 0.23, "value": 2.31e4 } ] }, { "name": "Naivas Kingara", "values": [ { "name": "Lyonnaise", "percentage": 0.2, "value": 2.09e4 }, { "name": "Chips 12mm*12mm", "percentage": 0.83, "value": 85250.0 }, { "name": "Wedges", "percentage": 0.24, "value": 24750.0 } ] }, { "name": "Naivas Kilimani", "values": [ { "name": "Lyonnaise", "percentage": 0.19, "value": 1.98e4 }, { "name": "Chips 12mm*12mm", "percentage": 0.71, "value": 73150.0 }, { "name": "Wedges", "percentage": 0.17, "value": 17050.0 } ] }, { "name": "Naivas Kasarani", "values": [ { "name": "Lyonnaise", "percentage": 0.02, "value": 2475.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.14, "value": 14575.0 }, { "name": "Wedges", "percentage": 0.02, "value": 2475.0 } ] }, { "name": "Naivas Imara Daima", "values": [ { "name": "Lyonnaise", "percentage": 0.03, "value": 2750.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.16, "value": 15950.0 }, { "name": "Wedges", "percentage": 0.03, "value": 3.3e3 } ] }, { "name": "Naivas Homeground", "values": [ { "name": "Lyonnaise", "percentage": 0.09, "value": 8.8e3 }, { "name": "Whole Peeled", "percentage": 0.01, "value": 550.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.48, "value": 48950.0 }, { "name": "Wedges", "percentage": 0.01, "value": 1.1e3 } ] }, { "name": "Naivas Greenhouse", "values": [ { "name": "Lyonnaise", "percentage": 0.18, "value": 1.87e4 }, { "name": "Chips 10mm*10mm", "percentage": 0.01, "value": 1.1e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.68, "value": 6.93e4 }, { "name": "Wedges", "percentage": 0.14, "value": 1.43e4 } ] }, { "name": "Naivas Capital Centre", "values": [ { "name": "Lyonnaise", "percentage": 0.38, "value": 3.85e4 }, { "name": "Chips 12mm*12mm", "percentage": 1.05, "value": 107250.0 }, { "name": "Wedges", "percentage": 0.37, "value": 37950.0 } ] }, { "name": "Naivas Buruburu", "values": [ { "name": "Lyonnaise", "percentage": 0.14, "value": 14850.0 }, { "name": "Chips 10mm*10mm", "percentage": 0.02, "value": 2.2e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.85, "value": 87450.0 }, { "name": "Wedges", "percentage": 0.14, "value": 14520.0 } ] }, { "name": "Naivas Agakhan Walk", "values": [ { "name": "Lyonnaise", "percentage": 0.14, "value": 14850.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.67, "value": 6.82e4 }, { "name": "Wedges", "percentage": 0.28, "value": 29150.0 } ] }, { "name": "Nairobi Street Kitchen", "values": [ { "name": "Whole Peeled", "percentage": 0.22, "value": 2.21e4 }, { "name": "Chips 12mm*12mm", "percentage": 2.03, "value": 208650.0 } ] }, { "name": "Munch 254", "values": [ { "name": "Chips 12mm*12mm", "percentage": 0.18, "value": 1.81e4 } ] }, { "name": "Meat O Max", "values": [ { "name": "Lyonnaise", "percentage": 0.03, "value": 3.0e3 }, { "name": "Chips 10mm*10mm", "percentage": 0.13, "value": 1.3e4 }, { "name": "Chips 12mm*12mm", "percentage": 1.02, "value": 104750.0 } ] }, { "name": "Mama Rocks", "values": [ { "name": "Chips 12mm*12mm", "percentage": 0.11, "value": 1.08e4 } ] }, { "name": "Lazizi Premier", "values": [ { "name": "Chips 12mm*12mm", "percentage": 2.94, "value": 301850.0 } ] }, { "name": "Kabete Junior Academy-School", "values": [ { "name": "Chips 12mm*12mm", "percentage": 0.01, "value": 1.2e3 }, { "name": "Wedges", "percentage": 0.02, "value": 2.4e3 } ] }, { "name": "Joy Catering", "values": [ { "name": "Lyonnaise", "percentage": 0.01, "value": 1.2e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.03, "value": 3.0e3 } ] }, { "name": "IZZI BRUNCH &CAKE", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.74, "value": 76375.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.61, "value": 62850.0 } ] }, { "name": "Hotspot Langata", "values": [ { "name": "Chips 12mm*12mm", "percentage": 1.18, "value": 1.209e5 } ] }, { "name": "Home Bakery& Coffee", "values": [ { "name": "Cubes", "percentage": 0.02, "value": 1680.0 }, { "name": "Chips 10mm*10mm", "percentage": 0.21, "value": 2.16e4 }, { "name": "Chips 12mm*12mm", "percentage": 0.01, "value": 1.2e3 } ] }, { "name": "Githinji Kariobangi", "values": [ { "name": "Chips 12mm*12mm", "percentage": 1.32, "value": 135720.0 } ] }, { "name": "Freeze Fast food.", "values": [ { "name": "Chips 10mm*10mm", "percentage": 1.58, "value": 161750.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.18, "value": 18750.0 } ] }, { "name": "FOUR POINTS", "values": [ { "name": "Chips 12mm*12mm", "percentage": 0.85, "value": 8.74e4 } ] }, { "name": "Fahari Gardens Hotel", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.37, "value": 38350.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.98, "value": 100350.0 } ] }, { "name": "Emara Ole Sereni hotel", "values": [ { "name": "Homefries(cubes with skin)", "percentage": 0.54, "value": 5.52e4 }, { "name": "Wedges with skin", "percentage": 0.15, "value": 1.51e4 }, { "name": "Cubes", "percentage": 0.03, "value": 3.0e3 }, { "name": "Lyonnaise", "percentage": 0.01, "value": 1.0e3 }, { "name": "Whole Peeled", "percentage": 0.06, "value": 6.6e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.16, "value": 1.68e4 }, { "name": "Wedges", "percentage": 0.39, "value": 4.0e4 } ] }, { "name": "Eden Life", "values": [ { "name": "Lyonnaise", "percentage": 0.02, "value": 2.3e3 }, { "name": "Whole Peeled", "percentage": 1.27, "value": 130250.0 }, { "name": "Chips 10mm*10mm", "percentage": 0.77, "value": 78740.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.52, "value": 53350.0 } ] }, { "name": "Donut Factory", "values": [ { "name": "Chips 12mm*12mm", "percentage": 1.87, "value": 1.918e5 } ] }, { "name": "CTR Kitchen Eastleigh", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.46, "value": 47125.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.58, "value": 5.92e4 } ] }, { "name": "Coffee Crest Restaurant", "values": [ { "name": "Lyonnaise", "percentage": 0.0, "value": 360.0 }, { "name": "Chips 10mm*10mm", "percentage": 0.06, "value": 6.3e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.06, "value": 6460.0 } ] }, { "name": "Bun Box", "values": [ { "name": "Chips 12mm*12mm", "percentage": 0.58, "value": 59550.0 } ] }, { "name": "BROOKHOUSE SCH- KAREN/RUNDA", "values": [ { "name": "Cubes", "percentage": 0.77, "value": 7.91e4 }, { "name": "Lyonnaise", "percentage": 0.52, "value": 53650.0 }, { "name": "Whole Peeled", "percentage": 0.78, "value": 79750.0 }, { "name": "Chips 12mm*12mm", "percentage": 3.92, "value": 402050.0 }, { "name": "Wedges", "percentage": 0.51, "value": 5.22e4 } ] }, { "name": "BOMA HOTELS", "values": [ { "name": "Chips 12mm*12mm", "percentage": 0.08, "value": 7.7e3 } ] }, { "name": "BLEND EMPIRE", "values": [ { "name": "Lyonnaise", "percentage": 0.13, "value": 13750.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.21, "value": 21450.0 }, { "name": "Wedges", "percentage": 0.1, "value": 9.9e3 } ] }, { "name": "Ayola Restaurant.", "values": [ { "name": "Chips 10mm*10mm", "percentage": 0.05, "value": 5.4e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.06, "value": 6.0e3 } ] }, { "name": "Art Club", "values": [ { "name": "Lyonnaise", "percentage": 0.37, "value": 3.78e4 }, { "name": "Chips 10mm*10mm", "percentage": 0.17, "value": 1.76e4 }, { "name": "Chips 12mm*12mm", "percentage": 0.43, "value": 4.4e4 } ] }, { "name": "Angela", "values": [ { "name": "Lyonnaise", "percentage": 0.0, "value": 240.0 }, { "name": "Chips 12mm*12mm", "percentage": 0.0, "value": 240.0 } ] }, { "name": "AIG Fryz", "values": [ { "name": "Lyonnaise", "percentage": 0.04, "value": 4.1e3 }, { "name": "Chips 12mm*12mm", "percentage": 0.45, "value": 4.66e4 } ] }, { "name": "15th ROOFTOP RESTAURANT", "values": [ { "name": "Whole Peeled", "percentage": 0.01, "value": 750.0 }, { "name": "Chips 10mm*10mm", "percentage": 0.68, "value": 6.98e4 }, { "name": "Chips 12mm*12mm", "percentage": 0.24, "value": 24750.0 } ] } ] } ] ```

Screenshots or Video

Screenshots / Video demonstration [Upload media here] ![autoscrollingDelta5_fullscreen](https://github.com/user-attachments/assets/823901d7-bce5-497a-ade1-99d77aeaf4fb) ![autoscrollingDelta5](https://github.com/user-attachments/assets/1918c5e7-2bf6-430c-b99d-a62954c86b23) ![no delta provided](https://github.com/user-attachments/assets/caed4e18-a679-466d-8d11-77d6aa9fc1e3)

Stack Traces

Stack Traces ```dart N/A ```

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output ```console $ flutter doctor -v [!] Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.22631.4317], locale en-US) • Flutter version 3.22.2 on channel stable at C:\src\flutter ! Warning: `dart` on your path resolves to C:\Program Files\Dart\dart-sdk\bin\dart.exe, which is not inside your current Flutter SDK checkout at C:\src\flutter. Consider adding C:\src\flutter\bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 761747bfc5 (4 months ago), 2024-06-05 22:15:13 +0200 • Engine revision edd8546116 • Dart version 3.4.3 • DevTools version 2.34.3 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at C:\Users\user\AppData\Local\Android\sdk • Platform android-34, build-tools 34.0.0 • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694) • All Android licenses accepted. [√] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe [X] Visual Studio - develop Windows apps X Visual Studio not installed; this is necessary to develop Windows apps. Download at https://visualstudio.microsoft.com/downloads/. Please install the "Desktop development with C++" workload, including all of its default components [√] Android Studio (version 2022.2) • 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 • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694) [√] IntelliJ IDEA Community Edition (version 2024.2) • IntelliJ at C:\Users\user\AppData\Local\Programs\IntelliJ IDEA Community Edition • Flutter plugin can be installed from: https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin version 242.22855.32 [√] VS Code (version 1.94.1) • VS Code at C:\Users\user\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.98.0 [√] Connected device (3 available) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22631.4317] • Chrome (web) • chrome • web-javascript • Google Chrome 129.0.6668.100 • Edge (web) • edge • web-javascript • Microsoft Edge 129.0.2792.89 [√] Network resources • All expected network resources are available. ! Doctor found issues in 2 categories. ```
KompelliSravanSyncfusion commented 1 week ago

Hi @petermusembi69,

Query 1: Bar width in cartesian charts decreases with more column series and autoScrollingDelta

We have checked your query and we were unable to reproduce reported issue in our end. In the attached sample, we have configured the autoScrollingDelta property to control the visible data points, which adjusts the bar width dynamically based on the available space. When autoScrollingDelta is set, the width of each bar increases or decreases proportionally, depending on the visible data range.

If you are still experiencing the issue, So, we kindly request you to try to replicate the reported issue in the below attached test sample and revert us so that it will help us assist you in a better way.

Query 2: UI Performance issues with large column series data sets

We tried to replicate the reported issue regarding UI Performance issue with large number of column series data sets at our end. Unfortunately, we are not able to reproduce the reported issue as we are not exactly sure on what scenario the issue is replicating. we kindly request you to share us with more information on your requirement in detail along with screenshots/screen-recordings. So that it will help us assist you in a better way.

Query1-gh2126.zip Query2-gh2126.zip

Regards, Kompelli Sravan Kumar.