Clustered Column Chart - Is there a way to always have the smallest bars in front to avoid hiding them?

[zambetpentru]

Hi,

Is there a way to have the smallest bars drawn at the front so data isn't hidden? E.g. Look at the X-axis = 24 where the dark red bar is hidden:

This shows the data:

[sfHariHaraSudhan]

Hi @zambetpentru,

We would like to inform you that there is no direct option to render the smallest Column Segments at the front, as it is the current behavior. However, if you need to make all the Column Segments visible when the enableSideBySideSeriesPlacement is disabled, you can achieve it by reordering the series in a descending order based on the data points given or by assigning an individual width to each Column Segment using the width property, as shown in the code snippet below.

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  late List<ChartSampleData> _firstData;
  late List<ChartSampleData> _secondData;
  late List<ChartSampleData> _thirdData;

  @override
  void initState() {
    _firstData = <ChartSampleData>[
      ChartSampleData(x: DateTime(2023, 10, 01), y: 55),
      ChartSampleData(x: DateTime(2023, 10, 02), y: 33),
      ChartSampleData(x: DateTime(2023, 10, 03), y: 18),
      ChartSampleData(x: DateTime(2023, 10, 04), y: 85),
      ChartSampleData(x: DateTime(2023, 10, 05), y: 52),
    ];
    _secondData = <ChartSampleData>[
      ChartSampleData(x: DateTime(2023, 10, 01), y: 13),
      ChartSampleData(x: DateTime(2023, 10, 02), y: 07),
      ChartSampleData(x: DateTime(2023, 10, 03), y: 03),
      ChartSampleData(x: DateTime(2023, 10, 04), y: 18),
      ChartSampleData(x: DateTime(2023, 10, 05), y: 06),
    ];
    _thirdData = <ChartSampleData>[
      ChartSampleData(x: DateTime(2023, 10, 01), y: 06),
      ChartSampleData(x: DateTime(2023, 10, 02), y: 04),
      ChartSampleData(x: DateTime(2023, 10, 03), y: 08),
      ChartSampleData(x: DateTime(2023, 10, 04), y: 10),
      ChartSampleData(x: DateTime(2023, 10, 05), y: 04),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SfCartesianChart(
          primaryXAxis: DateTimeAxis(
            intervalType: DateTimeIntervalType.days,
          ),
          primaryYAxis: NumericAxis(
            interval: 05,
            visibleMinimum: 0,
            visibleMaximum: 100,
          ),
          enableSideBySideSeriesPlacement: false,
          series: <CartesianSeries<ChartSampleData, DateTime>>[
            ColumnSeries(
              width: 0.7,
              dataSource: _firstData,
              xValueMapper: (ChartSampleData sales, int index) => sales.x,
              yValueMapper: (ChartSampleData sales, int index) => sales.y,
            ),
            ColumnSeries(
              width: 0.5,
              dataSource: _secondData,
              xValueMapper: (ChartSampleData sales, int index) => sales.x,
              yValueMapper: (ChartSampleData sales, int index) => sales.y,
            ),
            ColumnSeries(
              width: 0.3,
              dataSource: _thirdData,
              xValueMapper: (ChartSampleData sales, int index) => sales.x,
              yValueMapper: (ChartSampleData sales, int index) => sales.y,
            ),
          ],
        ),
      ),
    );
  }
}

class ChartSampleData {
  final DateTime x;
  final num y;

  ChartSampleData({
    required this.x,
    required this.y,
  });
}

Snapshot:

We have shared the Sample Browser link below for your reference regarding the back-to-back column.
SB: https://flutter.syncfusion.com/#/cartesian-charts/chart-types/column/back-to-back-column.

Note : You can also use the StackedColumnSeries to render all the Stacked Column Segments one above another. This will ensure that all the Segments are visible without being hidden. We have also shared the User Guide Documentation link below regarding the StackedColumnSeries for your reference.
UG: https://help.syncfusion.com/flutter/cartesian-charts/chart-types/stacked-column-chart.

Regards,
Hari Hara Sudhan. K.

[zambetpentru]

That is a very good idea about the different widths, thank you!