Skip to content

feat: Support per-side rod borders used for bar chart#2088

Open
haashem wants to merge 13 commits into
imaNNeo:mainfrom
haashem:main
Open

feat: Support per-side rod borders used for bar chart#2088
haashem wants to merge 13 commits into
imaNNeo:mainfrom
haashem:main

Conversation

@haashem
Copy link
Copy Markdown
Contributor

@haashem haashem commented Apr 19, 2026

Description

add support for per-side borders on BarChartRodData so users can render borders like top-only, left-only, etc.
Bar border are rendered inside - outside/centers makes bars look taller/shorter than data and can collide with nearby bars.

Resolves #1194

API

  • Added optional Border? border to BarChartRodData.
  • Kept existing borderSide for backward compatibility.
  • Rendering precedence:
    • If border is provided, it is used.
    • Otherwise, existing borderSide behavior is preserved.

Painter updates

  • Refactored bar border painting to support:
    • uniform border (borderSide)
    • per-side border (border)
    • dashed and non-dashed variants
  • Added edge-based path handling for top/right/bottom/left so per-side rendering works with rounded bars as well.
Screenshot 2026-04-19 at 22 43 19 Screenshot 2026-04-19 at 22 42 27 Screenshot 2026-04-19 at 22 44 37 Screenshot 2026-04-19 at 23 03 02

Checklist

  • I have followed the Contributor Guide when preparing my PR.
  • I have updated/added tests for ALL new/updated/fixed functionality.
  • I have updated/added relevant documentation and added dartdoc comments with ///.
  • I have updated/added relevant examples in example.

Breaking Change?

  • Yes, this PR is a breaking change.
  • No, this PR is not a breaking change.

Related Issues

Closes #1194

@haashem haashem changed the title feat: support per-side rod borders used for bar chart Feat: support per-side rod borders used for bar chart Apr 19, 2026
@haashem haashem changed the title Feat: support per-side rod borders used for bar chart feat: Support per-side rod borders used for bar chart Apr 19, 2026
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 20, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.27%. Comparing base (15562ee) to head (320cda6).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2088      +/-   ##
==========================================
+ Coverage   93.07%   94.27%   +1.19%     
==========================================
  Files          50       54       +4     
  Lines        3956     4785     +829     
==========================================
+ Hits         3682     4511     +829     
  Misses        274      274              
Flag Coverage Δ
flutter 94.27% <100.00%> (+1.19%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

Comment thread lib/src/chart/bar_chart/bar_chart_data.dart Outdated
Comment thread lib/src/chart/bar_chart/bar_chart_data.dart
Comment thread lib/src/chart/bar_chart/bar_chart_painter.dart Outdated
Comment thread lib/src/chart/bar_chart/bar_chart_painter.dart Outdated
Comment thread lib/src/chart/bar_chart/bar_chart_painter.dart Outdated
Comment thread lib/src/chart/bar_chart/bar_chart_painter.dart Outdated
@imaNNeo
Copy link
Copy Markdown
Owner

imaNNeo commented Apr 28, 2026

It seems borderRadius doesn't work well with the new changes:

For example, this is our sample 1 with the below change:

BarChartRodData(
  borderRadius: BorderRadius.circular(24),
  border: Border(top: BorderSide(color: Colors.red, width: 6)),
  ...
image

It should work with all the edge cases, for example this is what I get from the Flutter's container widget:

Center(
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(top: BorderSide(color: Colors.red, width: 6)),
          borderRadius: BorderRadius.all(Radius.circular(12))
        ),
      ),
    )
image

I think the issue is about the fact that we draw the border on the edge, but Flutter draws it inside the rect.
Let me know what you think about it

@haashem
Copy link
Copy Markdown
Contributor Author

haashem commented Apr 30, 2026

Exactly, that was the initial reason I used internal border rendering but caused regression for current user. What I think is better to conditionally render disjointed curved borders inside.

  • Full borders: centered stroke
  • Disjoint straight borders: centered stroke
  • Disjoint curved borders: inside stroke only

If we want to avoid this condition, then by default all borders should be rendered inside by default, but as you highlighted in earlier comments, it cause regressions for existing users.

Or maybe we can render border on the stroke center (default) but smooth the ends:

On stroke center but smoothing the edges and with multi color borders, doesn't look valid. Flutter BoxDecoration enforces using single color for all borders.

Screenshot 2026-04-30 at 22 26 12

I have added new changes which only renders disjointed borders inside, code can be a little simplified if we use single color border.

All Round Borders Partial Side Borders Border.all Top Border Dashed Borders
Screenshot 2026-04-30 at 22 42 43 Screenshot 2026-04-30 at 22 42 57 Screenshot 2026-04-30 at 22 43 30 Screenshot 2026-04-30 at 22 43 50 Screenshot 2026-04-30 at 22 52 55

@haashem haashem requested a review from imaNNeo May 9, 2026 22:16
@haashem
Copy link
Copy Markdown
Contributor Author

haashem commented May 12, 2026

@imaNNeo May I have your review again?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Abilit to specify a border with different border sides for bar charts.

2 participants