[syncfusion_flutter_charts][SfCartesianChart][StackedColumnSeries] Line series rendering twice when reload the widget

[sabachimp]

Library version: syncfusion_flutter_charts: ^22.2.12
Flutter version: 3.13.6

We are using SfCartesianChart with bar and line series combined. Though we reload the widget with same data source Line Series rendering twice. (as shown in the below image)

Initial Loading:

After reload:

As I searched there is no way to reset the chart while reloading, Can someone please suggest a way to resolve this issue?

[sfHariHaraSudhan]

Hi @sabachimp,

Based on the provided query, we have prepared a sample with the mentioned version to render both the Column Series and Line Series and tried to reset the chart by assigning the same data collection using setState method. Unfortunately, we are unable to replicate the mentioned behavior from my end.

Kindly refer 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> _data;

  @override
  void initState() {
    _data = [
      ChartSampleData(DateTime(2017), 1800),
      ChartSampleData(DateTime(2018), 1600),
      ChartSampleData(DateTime(2019), 1400),
      ChartSampleData(DateTime(2020), 1200),
      ChartSampleData(DateTime(2021), 1000),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SfCartesianChart(
          primaryXAxis: DateTimeAxis(),
          primaryYAxis: NumericAxis(
            interval: 500,
            visibleMinimum: 0,
            visibleMaximum: 2500,
            axisLabelFormatter: (axisLabelRenderArgs) {
              String text = '';
              switch (axisLabelRenderArgs.text) {
                case '0':
                  text = '\$0';
                  break;
                case '500':
                  text = '\$500K';
                  break;
                case '1000':
                  text = '\$1M';
                  break;
                case '1500':
                  text = '\$1.5M';
                  break;
                case '2000':
                  text = '\$2M';
                  break;
                case '2500':
                  text = '\$2.5M';
                  break;
              }
              return ChartAxisLabel(
                text,
                axisLabelRenderArgs.textStyle,
              );
            },
          ),
          series: <CartesianSeries<ChartSampleData, DateTime>>[
            ColumnSeries(
              dataSource: _data,
              xValueMapper: (ChartSampleData sales, int index) => sales.x,
              yValueMapper: (ChartSampleData sales, int index) => sales.y,
              color: Colors.green.shade100,
            ),
            LineSeries(
              dataSource: _data,
              xValueMapper: (ChartSampleData sales, int index) => sales.x,
              yValueMapper: (ChartSampleData sales, int index) => sales.y,
              width: 2,
              color: Colors.blue,
              markerSettings: const MarkerSettings(
                isVisible: true,
                color: Colors.blue,
                height: 2,
                width: 2,
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton.small(
          onPressed: () {
            _data = _data;
            setState(() {});
          },
          child: const Icon(Icons.update),
        ),
      ),
    );
  }
}

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

  final DateTime x;
  final num y;
}

Also attached the sample below for your reference. We recommend you share the sample by modifying it to reproduce the mentioned behavior with any recordings, along with a detailed explanation regarding the use case and purpose of your need. With that additional information, it will be very useful for us to provide possible solution from our end.

Regards,
Hari Hara Sudhan. K.
510532.zip