Replies: 1 comment
-
|
Hi @Herik2201 Thanks for the suggestion. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
When users increase their device’s system font size (Accessibility / Display & Text Size), the X and Y axis labels in react-native-gifted-charts scale up and can overlap, clip, or push chart content out of bounds. There’s currently no way to opt-out of text scaling via chart props.
Current behavior
Props like xAxisLabelTextStyle / yAxisTextStyle accept styles, but allowFontScaling is a prop of , not a style property.
Because the library doesn’t expose allowFontScaling, axis labels always follow the device’s font scale, which can be 1.3–1.5+ on many devices and break layout.
Expected behavior
Provide a way to pass allowFontScaling={false} (or true) to the Text elements used for X & Y axis labels (and ideally tick labels / value labels / legend, if applicable).
Default can remain true to keep backward compatibility.
Proposed API (either option works)
Option A — Simple booleans
<BarChart
// …
xAxisAllowFontScaling={false}
yAxisAllowFontScaling={false}
/>
Option B — Pass-through props for axis texts
<LineChart
// …
xAxisLabelProps={{ allowFontScaling: false }}
yAxisLabelProps={{ allowFontScaling: false }}
// (optional) if you have separate tick labels:
tickLabelProps={{ allowFontScaling: false }}
/>
Internally, the chart would forward these props

to the underlying components that render axis/tick labels.
Why this matters
Accessibility and UX: some apps need to keep chart layout stable even when system font size is large, and provide alternate affordances (tooltips/zoom) without the axes breaking.
This is a small, non-breaking enhancement that enables developers to respect their product’s layout constraints while still supporting large text elsewhere.
Beta Was this translation helpful? Give feedback.
All reactions