Crash/Freeze with `FlGridData.drawVerticalLine = true` and Time-Based `horizontalInterval`
- Dominant language
- Dart
- Stars
- 7.6k
- Forks
- 2k
- Avg merge
- 9d 1h
- Merged PRs (30d)
- 2
Description
**Description:**
We are experiencing crashes or application freezes when using `FlGridData` with `drawVerticalLine` set to `true` and `horizontalInterval` configured for a time-based X-axis. The X-axis values represent `DateTime` objects converted to `double` (millisecondsSinceEpoch). The issue persists even when all time-related values (`minX`, `maxX`, `FlSpot.x`, and `horizontalInterval` itself) are rounded to the nearest second or even minute.
The application becomes stable if `drawVerticalLine` is set to `false` and vertical grid lines are drawn manually (e.g., as separate `LineChartBarData` objects).
**Steps to Reproduce (Conceptual):**
1. Create a `LineChart` where the X-axis represents a timeline (e.g., several days or weeks).
2. Convert `DateTime` values to `double` (millisecondsSinceEpoch) for `FlSpot.x`, `minX`, and `maxX`.
3. Configure `FlGridData` with:
* `show: true`
* `drawVerticalLine: true`
* `drawHorizontalLine: true` (or `false`, crash still occurs)
* `horizontalInterval`: Set to a `double` representing a time duration in milliseconds (e.g., `Duration(days: 1).inMilliseconds.toDouble()`, `Duration(hours: 6).inMilliseconds.toDouble()`).
* `verticalInterval`: Set to a numerically reasonable interval for the Y-axis.
4. Provide valid `FlSpot` data within the `minX`/`maxX` range.
5. Run the application and navigate to the chart.
**Expected Behavior:**
The chart should render correctly with both horizontal and vertical grid lines, without crashing or freezing the application.
**Actual Behavior:**
The application either freezes completely or crashes. Sometimes, during hot reloads with `drawVerticalLine: true`, "Null check operator used on a null value" errors can be observed originating from within the `fl_chart` library.
**Further Details & Debugging Steps:**
* **Data Integrity:** We've confirmed that `minX`, `maxX`, `minY`, `maxY`, and all `FlSpot` coordinates are valid, finite numbers. No `NaN` or `Infinity` values are being passed to the chart.
* **Isolation:**
* Disabling `FlGridData` entirely (`show: false`) resolves the issue.
* Setting `FlGridData.drawVerticalLine = false` resolves the issue.
* The problem is specifically tied to `drawVerticalLine: true` in conjunction with a `horizontalInterval` representing a time duration.
* **Time Precision Experiment:**
* We hypothesized that sub-second or sub-minute precision might be an issue.
* Rounding all `DateTime` epoch millisecond values (for `FlSpot.x`, `minX`, `maxX`, and `horizontalInterval`) to the **nearest full second**: The crash persists.
* Rounding all `DateTime` epoch millisecond values to the **nearest full minute**: The crash persists.
This suggests the issue is not simply about millisecond/microsecond precision but potentially how `fl_chart` handles large `double` values for `horizontalInterval` in the context of vertical line drawing.
* **Workaround:** The current stable workaround is to set `drawVerticalLine = false` and manually render vertical grid lines using additional `LineChartBarData` instances, where each `LineChartBarData` represents a vertical line with two `FlSpot`s. This works reliably.
* **`horizontalInterval` Values:** The values used for `horizontalInterval` can be quite large, for example:
* 1 day = `86,400,000.0`
* 6 hours = `21,600,000.0`
* The issue seems to arise when `FlGridData` attempts to calculate and draw vertical lines based on these large interval values across a wide time range (`maxX` - `minX`).
**Possible Root Cause (Hypothesis):**
The internal calculations within `FlGridData` for drawing vertical lines might encounter issues (e.g., precision loss, infinite loops, division by zero, or incorrect iteration counts) when `horizontalInterval` and the axis range (`maxX - minX`) are very large `double` values, as is typical with millisecond epoch timestamps spanning several days or weeks.
**Environment:**
* Flutter version: 3.29.3
* `fl_chart` version: 1.0.0
* Dart version: 3.7.2
* Platform: iOS Emulator
I believe this issue lies within the `FlGridData` component when handling time-based data for vertical grid lines. Any insights or fixes would be greatly appreciated.
kind regards,
Soner
Contributor guide
Research direction
Start with the FlGridData implementation and reproduce the reported LineChart configuration using epoch-millisecond X values, drawVerticalLine enabled, and a large horizontalInterval. Trace the vertical grid-line calculation for looping, precision, or null errors, then verify that the chart renders without freezing or crashing while retaining both grid-line directions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100