imaNNeo / imaNNeo/fl_chart

Place SideTitleWidget inside of line graph

Open
#1,844 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
Dart
Stars
7.6k
Forks
2k
Avg merge
9d 1h
Merged PRs (30d)
2

Description

Hi, I would like to place the `SideTitleWidget` for the left y-axis inside of the graph while also keeping the `reservedSize` at 0, because I want the graph to take up the entire width of the screen. See screenshot of our UX designer.

![Screenshot 2025-01-09 at 22 51 50](https://github.com/user-attachments/assets/d3b4c63e-30d6-4b49-8125-b6048c8f7f6b)

Is this possible to do at all? I am able to wrap it in a `Transform` widget to move to labels to the right, so that they overlap the graph, but as soon as I set the `reservedSize` to 0, the widgets disappear.

This is what I currently have:
```dart
return SideTitleWidget(
axisSide: meta.axisSide,
space: 0,
// fitInside: SideTitleFitInsideData.disable(),
// fitInside: SideTitleFitInsideData(
// enabled: true,
// axisPosition: 10,
// parentAxisSize: 10,
// distanceFromEdge: 10,
// ),
child: Transform.translate(
offset: const Offset(30, 0), // Move the text to the right
child: Text(
UnitHelper.unitValueForDisplay(
value: value,
valueType: ToolAttributeValueType.pressure,
unitSystem: unitSystem,
),
style: style,
textAlign: TextAlign.center,
),
),
);
```
reservedSize = 27
![Schermafbeelding 2025-01-09 om 23 04 23](https://github.com/user-attachments/assets/da505916-300e-480f-bccd-5e832c936988)

reservedSize = 0
![Schermafbeelding 2025-01-09 om 23 02 56](https://github.com/user-attachments/assets/35cc634d-7228-43b0-bfe1-136f853e6195)

Contributor guide

Open the contributing guide

Research direction

Start from SideTitleWidget and the axis configuration using reservedSize: 0, reproducing the example in the issue. Trace how the left y-axis title is laid out and determine whether the labels can remain visible inside the graph; done means the labels render in the graph area while the chart retains the full available width.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.