Skip to content

[charts] Add disableTruncation to cartesian axes #17603

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

[charts] Add disableTruncation to cartesian axes #17603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions docs/data/charts/axis/MarginAndLabelPosition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { BarChart } from '@mui/x-charts/BarChart';

export default function MarginAndLabelPosition() {
const [fixMargin, setFixMargin] = React.useState(true);
const [disableTruncation, setDisableTruncation] = React.useState(false);

return (
<Box sx={{ width: '100%' }}>
Expand All @@ -19,6 +20,16 @@ export default function MarginAndLabelPosition() {
label="Increase axes size"
labelPlacement="end"
/>
<FormControlLabel
checked={disableTruncation}
control={
<Checkbox
onChange={(event) => setDisableTruncation(event.target.checked)}
/>
}
label="Disable truncation"
labelPlacement="end"
/>
</Stack>

<BarChart
Expand All @@ -32,6 +43,7 @@ export default function MarginAndLabelPosition() {
: usAirportPassengers.find((item) => item.code === value).fullName,
label: 'airports',
height: fixMargin ? 75 : undefined,
disableTruncation,
},
]}
// Other props
Expand All @@ -50,6 +62,7 @@ export default function MarginAndLabelPosition() {
valueFormatter: (value) => `${(value / 1000).toLocaleString()}k`,
label: 'passengers',
width: fixMargin ? 85 : undefined,
disableTruncation,
},
]}
/>
Expand Down
13 changes: 13 additions & 0 deletions docs/data/charts/axis/MarginAndLabelPosition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { BarChart } from '@mui/x-charts/BarChart';

export default function MarginAndLabelPosition() {
const [fixMargin, setFixMargin] = React.useState(true);
const [disableTruncation, setDisableTruncation] = React.useState(false);

return (
<Box sx={{ width: '100%' }}>
Expand All @@ -19,6 +20,16 @@ export default function MarginAndLabelPosition() {
label="Increase axes size"
labelPlacement="end"
/>
<FormControlLabel
checked={disableTruncation}
control={
<Checkbox
onChange={(event) => setDisableTruncation(event.target.checked)}
/>
}
label="Disable truncation"
labelPlacement="end"
/>
</Stack>

<BarChart
Expand All @@ -32,6 +43,7 @@ export default function MarginAndLabelPosition() {
: usAirportPassengers.find((item) => item.code === value)!.fullName,
label: 'airports',
height: fixMargin ? 75 : undefined,
disableTruncation,
},
]}
// Other props
Expand All @@ -50,6 +62,7 @@ export default function MarginAndLabelPosition() {
valueFormatter: (value: number) => `${(value / 1000).toLocaleString()}k`,
label: 'passengers',
width: fixMargin ? 85 : undefined,
disableTruncation,
},
]}
/>
Expand Down
2 changes: 2 additions & 0 deletions docs/data/charts/axis/axis.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,8 @@ In the following demo, the size of the x- and y-axes is modified to increase the
The first and last tick labels may bleed into the margin. If that margin is not enough to display the label, it might be clipped.
To avoid this, you can use the `margin` prop to increase the space between the chart and the edge of the container.

Alternatively you can disable clipping altogether by setting the desired axis's `disableTruncation` property to true.

{{"demo": "MarginAndLabelPosition.js"}}

### Rendering
Expand Down
20 changes: 11 additions & 9 deletions packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
sx,
offset,
height: axisHeight,
disableTruncation,
} = defaultizedProps;

const theme = useTheme();
Expand Down Expand Up @@ -337,15 +338,16 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
axisHeight - (label ? labelHeight + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP,
);

const tickLabels = isHydrated
? shortenLabels(
visibleLabels,
drawingArea,
tickLabelsMaxHeight,
isRtl,
axisTickLabelProps.style,
)
: new Map(Array.from(visibleLabels).map((item) => [item, item.formattedValue]));
const tickLabels =
!disableTruncation && isHydrated
? shortenLabels(
visibleLabels,
drawingArea,
tickLabelsMaxHeight,
isRtl,
axisTickLabelProps.style,
)
: new Map(Array.from(visibleLabels).map((item) => [item, item.formattedValue]));

return (
<XAxisRoot
Expand Down
8 changes: 5 additions & 3 deletions packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
sx,
offset,
width: axisWidth,
disableTruncation,
} = defaultizedProps;

const theme = useTheme();
Expand Down Expand Up @@ -259,9 +260,10 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
TICK_LABEL_GAP,
);

const tickLabels = isHydrated
? shortenLabels(yTicks, drawingArea, tickLabelsMaxWidth, isRtl, axisTickLabelProps.style)
: new Map(Array.from(yTicks).map((item) => [item, item.formattedValue]));
const tickLabels =
!disableTruncation && isHydrated
? shortenLabels(yTicks, drawingArea, tickLabelsMaxWidth, isRtl, axisTickLabelProps.style)
: new Map(Array.from(yTicks).map((item) => [item, item.formattedValue]));

return (
<YAxisRoot
Expand Down
10 changes: 10 additions & 0 deletions packages/x-charts/src/models/axis.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,11 @@ export interface ChartsAxisProps extends TickParams {

export interface ChartsYAxisProps extends ChartsAxisProps {
axis?: 'y';
/**
* When true, the tick labels will not be truncated.
* @default false
*/
disableTruncation?: boolean;
}

export interface ChartsXAxisProps extends ChartsAxisProps {
Expand All @@ -145,6 +150,11 @@ export interface ChartsXAxisProps extends ChartsAxisProps {
* @default 4
*/
tickLabelMinGap?: number;
/**
* When true, the tick labels will not be truncated.
* @default false
*/
disableTruncation?: boolean;
}

type AxisSideConfig<AxisProps extends ChartsAxisProps> = AxisProps extends ChartsXAxisProps
Expand Down