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.

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.