How to stop a line chart fluttering

Question

I want to draw a line chart with some data in Flutter Mobile App, so used fl_chart package.

The data is notified 50 times per second (50Hz) from a BLE-connected device.

My app subscribes to the notifications and draws a line chart with notified data.

Unfortunately, the line chart flutters unstably (look for the red line chart).

Even it draws a stable chart when notifications are under 5Hz, but too slow to use.

I want my app to draws the chart with over 50Hz.

Could you tell me how to solve this fluttering?

Arduino Serial Plotter

Flutter

enter image description here

AspectRatio(
  aspectRatio: 1.5,
  child: Padding(
    padding: const EdgeInsets.only(bottom: 24.0),
    child: LineChart(
      LineChartData(
        minY: -50,
        maxY: 50,
        minX: iredData.first.x,
        maxX: iredData.last.x,
        lineTouchData: LineTouchData(enabled: false),
        clipData: FlClipData.all(),
        gridData: FlGridData(
          show: true,
          drawVerticalLine: false,
        ),
        borderData: FlBorderData(show: false),
        lineBarsData: [
          iredLine(iredData),
        ],
        titlesData: FlTitlesData(show: false),
      ),
    ),
  ),
)

LineChartBarData iredLine(List<FlSpot> points) {
  return LineChartBarData(
    spots: points,
    dotData: FlDotData(
      show: false,
    ),
    gradient: LinearGradient(
      colors: [widget.sinColor, widget.sinColor],
      stops: const [0.1, 1.0],
    ),
    barWidth: 4,
    isCurved: false,
  );
}

I think the problem lies in your calculation of `minX` and `maxX`. Try to set them to fixed values just for testing. — Michael Kotzjan, Mar 31 '23 at 19:12
Thanks for your comment, I think the question was a little confusing. so I edited it and posted the answer by myself. — Shion, Apr 03 '23 at 02:55

Shion · Accepted Answer · 2023-04-03T02:58:25.507

I solved this problem with the swapAnimationDuration: Duration.zero parameter in LineChart widget

Refer to https://github.com/imaNNeo/fl_chart/issues/109

AspectRatio(
  aspectRatio: 1.5,
  child: Padding(
    padding: const EdgeInsets.only(bottom: 24.0),
    child: LineChart(
      swapAnimationDuration: Duration.zero,
        minY: -50,
        maxY: 50,
        minX: iredData.first.x,
        maxX: iredData.last.x,
        lineTouchData: LineTouchData(enabled: false),
        clipData: FlClipData.all(),
        gridData: FlGridData(
          show: true,
          drawVerticalLine: false,
        ),
        borderData: FlBorderData(show: false),
        lineBarsData: [
          iredLine(iredData),
        ],
        titlesData: FlTitlesData(show: false),
      ),
    ),
  ),
)

How to stop a line chart fluttering

1 Answers1