heart_rate_chart

English | 中文

A lightweight Flutter heart‑rate range chart with spikes & hover tooltip. Optimized for day‑view hour buckets, customizable via HeartRateChartStyle & HeartRateChartConfig.

💡 Usage Tip

This component can be directly adapted to the health plugin for heart rate data acquisition.
At the end of this document, you’ll find an example showing how to convert raw heart rate samples into the BucketWithSpikes structure used by the HeartRateChart component. preview

Install

flutter pub add heart_rate_chart

Quick start

SizedBox(
  height: 260,
  child: HeartRateChart(
    buckets: yourData,
    range: DateTimeRange(start: start, end: end),
    style: const HeartRateChartStyle(barWidthFactor: 0.55),
    config: const HeartRateChartConfig(minY: 40, maxY: 200),
  ),
)

Data model

  • HeartRateBucket(time, minBpm, maxBpm, medianBpm?)
  • HeartSpike(time, bpm)
  • BucketWithSpikes(bucket, spikes)

Customization

Use style for visuals, config for behavior:

HeartRateChartStyle

  • gridColor, barColor, spikeColor, tooltipBg, tooltipBorder
  • tooltipTextStyle, axisLabelStyle
  • barRadius, barWidthFactor, spikeRadius
  • padding

HeartRateChartConfig

  • bucketDuration (default 1h)
  • showMedianLine, showGridY, showGridX
  • animate, animationDuration, animationCurve
  • minY, maxY, yTicks
  • xHourTicks (e.g. [0,6,12,18,24])
  • yLabelFormatter, xHourLabelFormatter, tooltipFormatter

Callbacks

  • onTapBucket(HeartRateBucket)
  • onHoverBucket(HeartRateBucket) (reserved)

License

MIT

📦 Optional: Plain (No health Dependency) Version

This variant lets you use heart_rate_chart without importing the health plugin.
It accepts simple DTOs (HrSample) containing only time and BPM, while keeping all outlier/spike logic identical to health_adapter.dart.

class HrSample {
  final DateTime time;
  final num bpm;
  HrSample(this.time, this.bpm);
}

// identical logic as IQR version...
List<BucketWithSpikes> toBucketsFromSamples(
  List<HrSample> samples, {
  Duration interval = const Duration(minutes: 60),
  double iqrK = 1.5,
  bool includeSpikesInBars = false,
}) { /* same implementation as Chinese README */ }

With this approach:

  • You can use the chart in apps that don’t depend on package:health.
  • Or, convert your HealthDataPoints to HrSample before calling it.

Libraries

extra/plain_adapter
heart_rate_chart