Skip to content

Feature Request: Add border radius and padding support to FlBorderDataΒ #2022

@Simon06-clippy

Description

@Simon06-clippy
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.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions