how to draw step line? Lack of Support for StepLine Drawing and User Confusion in fl_chart
- Dominant language
- Dart
- Stars
- 7.6k
- Forks
- 2k
- Avg merge
- 9d 1h
- Merged PRs (30d)
- 2
Description

Description:
While attempting to use the fl_chart library to create stepped line (stepLine) graphs, it became apparent that the library lacks specific functionalities to accomplish this effect efficiently. Specifically, achieving a stepped line chart that integrates both horizontal and vertical lines in a series without cumbersome workarounds is challenging.
Core Issues:
Horizontal Line Length Control: In fl_chart, the HorizontalLine class does not permit control over the start and end positions. Lines span the entire width of the chart by default, without parameters to define specific cutoffs at designated x-axis points.
Stepped Line Drawing: Although it's feasible to position multiple HorizontalLine and VerticalLine instances consecutively to simulate a stepped effect, this approach is neither intuitive nor straightforward. Additionally, there isn’t a simple method to link these lines cohesively into a seamless stepped graph.
Custom Drawing Limitations: While custom drawing using drawBehindEverything might be a potential workaround, it requires in-depth understanding of the library’s drawing system, which is not user-friendly for general users.
Feature Requests:
It would be beneficial for fl_chart to incorporate native support for stepped line charts. Specifically:
Introduce a StepLineChart class or incorporate a stepped line mode in existing line chart types.
Allow HorizontalLine and VerticalLine to accept start and end coordinates for both the X and Y axes, providing users precise control over where these lines should start, end, and connect.
Conclusion:
Incorporating these features would not only make fl_chart more robust and versatile but also enhance its ability to depict stepped data changes clearly and effectively.
Contributor guide
Research direction
Start by reviewing the HorizontalLine and VerticalLine APIs and the custom drawing path using drawBehindEverything. Define whether the feature should provide native stepped line charts, bounded line coordinates, or both. Done should include a usable stepped graph with connected horizontal and vertical segments and precise line start and end positions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100