imaNNeo / imaNNeo/fl_chart

Crash/Freeze with `FlGridData.drawVerticalLine = true` and Time-Based `horizontalInterval`

Open
#1,939 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.