How to Find Min and Max Data in Flutter Cartesian Chart?

In this article, we described how to find the min and max data point value based on the visible range in Flutter cartesian chart.

The SfCartesianChart widget provides an option to find the min and visible max data point value based on the visible range. By using the didRangeChange method we can find the min and max data point values.

The following steps explain how to find the min and max data point value from visible range in SfCartesianChart.

Step 1. Initialize the chartData variable which holds the data source for the chart.

List<CandleSeriesData> getChartData() {
    return [
      CandleSeriesData(DateTime(2022, 1, 1), 105, 110, 70, 400),
      CandleSeriesData(DateTime(2022, 1, 2), 110, 120, 105, 125),
      CandleSeriesData(DateTime(2022, 1, 3), 115, 90, 110, 140),
    ];
  }
  
/// Chart candleSeriesData
class CandleSeriesData {
  final DateTime date;
  final double open;
  final double close;
  final double high;
  final double low;

  CandleSeriesData(this.date, this.open, this.close, this.high, this.low);
}

Step 2: Create the SfCartesianChart widget with the Candle Series and assign the chartData to the dataSource property. Then in the high, low, open and close data source value based on this data point values we can find the min and max data point value by using the didRangeChange method. After finding the min and max visible points we can draw the line by the paint method.

class CustomPlotLine<CandleSeriesData, DateTime>
    extends CandleSeriesRenderer<CandleSeriesData, DateTime> {
  late num high, low;

  @override
  void didRangeChange(RenderChartAxis axis) {
    if (axis == xAxis) {
      super.didRangeChange(axis);
      for (var index in super.visibleIndexes) {
        if (index + 1 < highValues.length) {
          final num currentHighMax =
              max(highValues[index], highValues[index + 1]);
          final num currentLowMax = max(lowValues[index], lowValues[index + 1]);
          final num currentOpenMax =
              max(openValues[index], openValues[index + 1]);
          final num currentCloseMax =
              max(closeValues[index], closeValues[index + 1]);

          final num currentHighMin =
              min(highValues[index], highValues[index + 1]);
          final num currentLowMin = min(lowValues[index], lowValues[index + 1]);
          final num currentOpenMin =
              min(openValues[index], openValues[index + 1]);
          final num currentCloseMin =
              min(closeValues[index], closeValues[index + 1]);

          low = _findMin(
              currentLowMin, currentHighMin, currentOpenMin, currentCloseMin);
          high = _findMax(
              currentHighMax, currentLowMax, currentOpenMax, currentCloseMax);
        }
      }
    } else {
      super.didRangeChange(axis);
    }
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    super.paint(context, offset);
    if (xAxis != null && xAxis!.visibleRange != null) {
      final x1 = xAxis!.visibleRange!.minimum;
      final x2 = xAxis!.visibleRange!.maximum;

      Offset point1 = Offset(pointToPixelX(x1, high), pointToPixelY(x1, high));
      Offset point2 = Offset(pointToPixelX(x2, high), pointToPixelY(x2, high));

      Offset point3 = Offset(pointToPixelX(x1, low), pointToPixelY(x1, low));
      Offset point4 = Offset(pointToPixelX(x2, low), pointToPixelY(x2, low));

      context.canvas.drawLine(point1, point2, Paint()..color = Colors.green);
      context.canvas.drawLine(point3, point4, Paint()..color = Colors.red);
    }
  }

  num _findMin(num low, num high, num open, num close) {
    return [low, high, open, close].reduce((a, b) => a < b ? a : b);
  }

  num _findMax(num low, num high, num open, num close) {
    return [low, high, open, close].reduce((a, b) => a > b ? a : b);
  }
}

By following these steps and the provided code snippet, you can successfully find min and max data point value and you can draw the line.

** Sample **

**Note**
Known Issues:
Finding the visible minimum and visible maximum values based on the data point is (75%) completed partially in the dynamic update.
The horizontal x position of the line which is drawn to indicate the visible minimum and visible maximum is not properly positioned.  

Conclusion

I hope you enjoyed learning about how to find Min and Max Data in Flutter CartesianChart.

You can refer to our Flutter CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter CartesianChart documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!