Lazy loading data with padding and controlling axis scaling in fl_chart #1978
amir-rahimian
started this conversation in
General
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Hi 👋 First of all, thank you for this amazing library — it’s honestly the nicest Flutter charting package I’ve used so far 🙏
I’m working on a use case similar to financial/sensor data charts, and I have two challenges:
1. Lazy loading with left-side padding
I start with the last 50 data points (X = time, Y = value).
What I want is for those 50 points to take ~90% of the visible chart area, and leave ~10% empty space on the left side.
The idea is that the user sees the latest data but can also pan left into that empty space.
Once the user reaches that space, the chart should trigger a load of older data (previous page) and append it to the left side — similar to how crypto price charts lazily load history.
I tried:
Using TransformationController to simulate padding and detect boundaries.
Experimenting with the chart viewport and panning callbacks.
But I couldn’t find a reliable way to leave that “extra scrollable space” and use it as a trigger.
2. Zooming only one axis at a time
With FlTransformationConfig, the scaleAxis parameter currently supports: horizontal, vertical, free, none.
What I need is something like “both but separately” → meaning:
Allow zooming on either X or Y,
but not both axes simultaneously.
The intended behavior:
If the gesture is mostly horizontal → apply horizontal zoom.
If the gesture is mostly vertical → apply vertical zoom.
I tried:
Switching scaleAxis dynamically during gesture handling.
Looking into gesture detectors around the chart.
But so far, I haven’t figured out a clean way to detect “which axis to lock onto” while the gesture is happening.
Summary
So my questions are:
Is there a recommended way (or example) to implement lazy loading with extra left padding in fl_chart?
How could I achieve the “one-axis-at-a-time” zooming behavior with FlTransformationConfig?
I’m still experimenting and trying to figure this out myself, but if anyone has insights or best practices, I’d be very grateful.
Thanks again for building and maintaining this awesome library 🙌
Beta Was this translation helpful? Give feedback.
All reactions