imaNNeo / imaNNeo/fl_chart

Feature Request: Add border radius and padding support to FlBorderData

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

Description

Image

Hi fl_chart team! 👋

I've been working on a custom fork to add border radius and padding support to FlBorderData, and I've made good progress with the implementation. However, I've encountered some issues that are beyond my current understanding of the codebase, and I'm hoping you could help implement this feature properly.

**What I've implemented:**
I've successfully added two new properties to FlBorderData:

borderRadius (BorderRadius): Allows rounded corners for the chart border
padding (EdgeInsets): Adds internal padding around the chart
The modifications include:

1. Updated FlBorderData class in base_chart_data.dart with the new properties
2. The border rendering works correctly with these new properties

**Current limitations:**
Unfortunately, my implementation doesn't properly handle:

1. Tooltips overflow: When tooltips appear near the edges, they can extend beyond the chart boundaries and don't respect the new padding/border radius
2. Bottom axis labels: The bottom axis text/labels positioning doesn't account for the added padding, causing layout issues

I believe these issues are related to how the layout calculations work in axis_chart_scaffold_widget.dart and the tooltip rendering logic, but I'm not familiar enough with the codebase to fix them properly.

**Why this feature would be valuable:**

- Rounded corners provide a more modern, polished look for charts
- Padding allows better visual separation between the chart content and its border
- Both features are commonly requested for better UI/UX customization

Request:
Would it be possible for the maintainers to implement this feature properly? I'm happy to share my code as a starting point, but I don't feel confident opening a PR since the tooltip and axis label issues need to be resolved by someone with deeper knowledge of the chart rendering pipeline.

Contributor guide

Open the contributing guide

Research direction

Start with FlBorderData in base_chart_data.dart and trace how its border radius and padding flow through axis_chart_scaffold_widget.dart and the tooltip rendering logic. Check the existing implementation and layout calculations for edge tooltips and bottom axis labels. Done means rounded borders and padding render correctly without tooltip overflow or misplaced axis labels.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.