[charts] Improve code reuse in `ChartsXAxis` and `ChartsYAxis` #19198

bernardobelchior · 2025-08-15T12:01:54Z

Refactored ChartsXAxis and ChartsYAxis.

The shared logic that was previous in ChartsYAxis was moved back into it. ChartsYAxis is responsible for rendering the axis itself, the line and the label, and it also decides whether to render ChartsSingleYAxis or ChartsGroupedYAxis. ChartsSingleYAxis and ChartsGroupedYAxis now only render ticks according to their logic. The same logic applies to the x axis.

mui-bot · 2025-08-15T12:03:45Z

Deploy preview: https://deploy-preview-19198--material-ui-x.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	▼-330B^(-0.11%)	▼-204B^(-0.21%)
@mui/x-charts-pro	▼-312B^(-0.08%)	▼-184B^(-0.15%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against c95e459

bernardobelchior · 2025-08-15T12:04:03Z

packages/x-charts/src/ChartsYAxis/useAxisTicksProps.ts

-import { isInfinity } from '../internals/isInfinity';

-export const useAxisProps = (inProps: ChartsYAxisProps) => {
+export function useAxisTicksProps(inProps: ChartsYAxisProps) {


This hook is now only for ticks

bernardobelchior · 2025-08-15T12:05:00Z

packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx

 *
 * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
 */
 function ChartsYAxis(inProps: ChartsYAxisProps) {


Moved most of the shared logic back to ChartsYAxis. No need to abstract it into a hook if it's just used here.

Now ChartsSingleYAxis and ChartsGroupedYAxis are only responsible for rendering ticks.

A lot of the logic can be kept in a hook IMO. Makes the component "cleaner"

I agree that we can probably make this component cleaner, but I'm not sure if moving all the logic to a hook is the best way to do it. We'd have a big hook with many parameters returning an object with a bunch of values. That hides the complexity, but doesn't reduce it. I think a better way might be to separate the logic into smaller pieces, which I can try to do in a follow-up PR.

codspeed-hq · 2025-08-15T12:19:49Z

CodSpeed Performance Report

Merging #19198 will not alter performance

_{Comparing bernardobelchior:improve-charts-y-axis-code-reuse (c95e459) with master (4be419e)}

Summary

✅ 10 untouched benchmarks

JCQuintas

We should probably append Ticks to ChartsGrouped*Axis, ChartsGrouped*Axis if we are only rendering the ticks

JCQuintas · 2025-08-18T10:59:14Z

packages/x-charts/src/ChartsYAxis/utilities.ts

 /* Gap between the axis label and tick labels. */
 export const AXIS_LABEL_TICK_LABEL_GAP = 2;

-export const YAxisRoot = styled(AxisRoot, {


Might as well remove the XAxisRoot from the x version, no?

JCQuintas · 2025-08-18T11:01:15Z

packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx

 *
 * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
 */
 function ChartsYAxis(inProps: ChartsYAxisProps) {


A lot of the logic can be kept in a hook IMO. Makes the component "cleaner"

github-actions · 2025-09-03T09:05:56Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

alexfauquette · 2025-09-08T14:42:30Z

packages/x-charts/src/ChartsXAxis/ChartsXAxisImpl.tsx

+  const drawingArea = useDrawingArea();
+  const { left, top, width, height } = drawingArea;


Looks weird

Suggested change

const drawingArea = useDrawingArea();

const { left, top, width, height } = drawingArea;

const { left, top, width, height } = useDrawingArea();

…9198)

bernardobelchior commented Aug 15, 2025

View reviewed changes

bernardobelchior added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels Aug 15, 2025

bernardobelchior force-pushed the improve-charts-y-axis-code-reuse branch from b236920 to 5b49f62 Compare August 15, 2025 13:02

bernardobelchior changed the title ~~[charts] Improve code reuse in ChartsYAxis~~ [charts] Improve code reuse in ChartsXAxis and ChartsYAxis Aug 15, 2025

bernardobelchior marked this pull request as ready for review August 15, 2025 14:40

bernardobelchior requested review from JCQuintas and alexfauquette as code owners August 15, 2025 14:40

JCQuintas reviewed Aug 18, 2025

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Sep 3, 2025

bernardobelchior added 2 commits September 8, 2025 11:49

[charts] Improve code reuse in ChartsYAxis

53f1725

Apply same logic to x axis

37f9fe7

bernardobelchior force-pushed the improve-charts-y-axis-code-reuse branch from 5b49f62 to 37f9fe7 Compare September 8, 2025 10:50

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Sep 8, 2025

bernardobelchior added 4 commits September 8, 2025 11:51

Append Ticks to some component

58d2889

Move XAxisRoot to ChartsXAxis

7065878

Avoid exporting XAxisRoot

c09d751

Fix rebase

0680272

bernardobelchior requested a review from JCQuintas September 8, 2025 12:44

Fix static

cac1928

alexfauquette approved these changes Sep 8, 2025

View reviewed changes

Address PR feedback

c95e459

bernardobelchior merged commit 3f4237d into mui:master Sep 9, 2025
22 checks passed

bernardobelchior deleted the improve-charts-y-axis-code-reuse branch September 9, 2025 07:44

mikeamarkey mentioned this pull request Sep 12, 2025

[charts] Axis labels are now visible in BarCharts even when there is no data #19553

Closed

JCQuintas pushed a commit to JCQuintas/mui-x that referenced this pull request Sep 15, 2025

[charts] Improve code reuse in ChartsXAxis and ChartsYAxis (mui#1…

57166d4

…9198)

		const drawingArea = useDrawingArea();
		const { left, top, width, height } = drawingArea;

	const drawingArea = useDrawingArea();
	const { left, top, width, height } = drawingArea;
	const { left, top, width, height } = useDrawingArea();

Uh oh!

[charts] Improve code reuse in ChartsXAxis and ChartsYAxis #19198

[charts] Improve code reuse in ChartsXAxis and ChartsYAxis #19198

Uh oh!

Conversation

bernardobelchior commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codspeed-hq bot commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging #19198 will not alter performance

Summary

Uh oh!

JCQuintas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[charts] Improve code reuse in `ChartsXAxis` and `ChartsYAxis` #19198

[charts] Improve code reuse in `ChartsXAxis` and `ChartsYAxis` #19198

bernardobelchior commented Aug 15, 2025 •

edited

Loading

mui-bot commented Aug 15, 2025 •

edited

Loading

codspeed-hq bot commented Aug 15, 2025 •

edited

Loading