Poor Performance on StackedColumnSeries

[Lukas Freudenmann]

Hi there,

I had problems with the performance of StackedColumnSeries. Unlike LineSeries, they render very slowly and are lagging. I tested the whole thing with about 120 data points. With LineSeries this was no problem at all, but the ColumnSeries are unusable. Maybe the implementation should be optimized here.

Below is the code how I implemented the chart:

SfCartesianChart(
  plotAreaBorderWidth: 0,
  primaryXAxis: DateTimeCategoryAxis(
    isVisible: true,
    majorGridLines: const MajorGridLines(width: 0),
    labelRotation: 75,
  ),
  zoomPanBehavior: ZoomPanBehavior(
    enablePinching: true,
    zoomMode: ZoomMode.x,
    enablePanning: true,
    enableMouseWheelZooming: false,
  ),
  primaryYAxis: NumericAxis(isVisible: true),
  series: data
      .map(
        (dataPoint) => StackedColumnSeries<DateTimeDataPoint, DateTime>(
          name: widget.legends[data.indexOf(dataPoint)],
          dataSource: dataPoint,
          xValueMapper: (DateTimeDataPoint dataPoint, _) => dataPoint.xPoint,
          yValueMapper: (DateTimeDataPoint dataPoint, _) => dataPoint.yPoint,
          color: widget.chartColors[data.indexOf(dataPoint)],
        ),
      )
      .toList(),
);

[Yuvaraj Gajaraj]

Hi Lukas,

We are validating your query at our end, and we will update further details in one business day on 6 April 2023. We appreciate your patience until then.

Regards,

Yuvaraj.

[Yuvaraj Gajaraj]

Hi Lukas,

The following are the key points that can be used to boost the performance of the chart when there is a need to plot high volume data.

• Load and store the required data points in the initState method itself, and then set the data points to the chart series. 
• Use NumericAxis or DateTimeAxis instead of CategoryAxis. 
• When there are large number of points to load in line series, you can use FastLineSeries series instead of LineSeries.
• Instead of enabling data markers and labels when there are large number of data points, you can use Trackball to view the point information.
• Set series animationDuration as 0 to disable the animation while loading large number of data points.
• Use updateDataSource method while updating dynamic data points instead of calling setState. For more details refer ug - https://help.syncfusion.com/flutter/cartesian-charts/methods#updatedatasource.
• Use On-demand loading while rendering large data points, it can be used to load more data to the chart when the visible range reaches the end on dragging in the chart. https://help.syncfusion.com/flutter/cartesian-charts/on-demand-loading

We have also tested and ensured the StackedColumn series with more than 120 data points with 3 series and it is working fine when performing zoom and panning. We didn't experience any performance related issues. If you have any further queries please get back to us.

Regards,

Yuvaraj.