Skip to content

fix(chart): add margins to radar chart examples to prevent label cutoff#10225

Open
mahmoodhamdi wants to merge 1 commit intoshadcn-ui:mainfrom
mahmoodhamdi:fix/radar-chart-label-cutoff
Open

fix(chart): add margins to radar chart examples to prevent label cutoff#10225
mahmoodhamdi wants to merge 1 commit intoshadcn-ui:mainfrom
mahmoodhamdi:fix/radar-chart-label-cutoff

Conversation

@mahmoodhamdi
Copy link
Copy Markdown

What

Added explicit margins to all radar chart examples that were missing them, preventing axis label text from being clipped.

Why

All radar chart examples (except chart-radar-icons, chart-radar-legend, and chart-radar-label-custom which already had explicit margins) were using Recharts' default minimal margins. This caused PolarAngleAxis labels — especially longer month names like "February" — to be cut off at the container edges despite ample available space.

How

Added margin={{ top: 10, right: 10, bottom: 10, left: 10 }} to the <RadarChart> component in 11 example files, matching the pattern already used in chart-radar-label-custom.tsx.

Files changed (11):

  • chart-radar-default.tsx
  • chart-radar-dots.tsx
  • chart-radar-multiple.tsx
  • chart-radar-grid-none.tsx
  • chart-radar-grid-fill.tsx
  • chart-radar-radius.tsx
  • chart-radar-lines-only.tsx
  • chart-radar-grid-circle.tsx
  • chart-radar-grid-circle-fill.tsx
  • chart-radar-grid-circle-no-lines.tsx
  • chart-radar-grid-custom.tsx

Testing

  • Verified labels are fully visible in all radar chart variants
  • The 3 files that already had explicit margins were left untouched

Closes #9948

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 29, 2026

@mahmoodhamdi is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

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.

[bug]: Radar examples all cut off label text

1 participant