Summary

When you pass a custom tick-label component via slots.axisTickLabel, the built-in ellipsis logic still truncates the incoming text prop. Add a new boolean prop—disableTruncate—on both ChartsXAxis and ChartsYAxis (and their underlying axis components) to disable that truncation and deliver the full text to custom components.

Examples

<ChartsXAxis axisId="xAxis" data={labels} scaleType="band" disableTruncate height={80} slots={{ axisTickLabel: CustomTickLabel }} slotProps={{ axisTickLabel: { /* … */ } }} />

Motivation

• Full control: Custom components (e.g. using , tooltips, multi-line rendering) need the unmodified text to apply their own truncation or wrapping logic. Such as a tooltip that shows the full non truncated text.
• Consistency: Makes truncation opt-in rather than forcibly applied, aligning with other MUI components that offer noWrap/ellipsis toggles.
• Future-proof: Avoids workarounds or internal hacks to bypass built-in clipping when building advanced chart UIs.

Search keywords: truncate · disableTruncate · ellipsis · tickLabel · axisTickLabel · xAxis · yAxis