Skip to content
🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.
+

Charts - Axis customization

Customize how chart axes are rendered and styled.

Beyond the axis definition, there are several other ways to further customize how axes are rendered.

Styling axes

To target a specific axis by its ID, use the data-axis-id attribute as a selector. This is useful when you have multiple axes and want to style them differently.

In the example below, the revenue axis label is styled with a teal color and the profit axis label with a blue color to match their respective series.

  • Revenue
  • Profit
Press Enter to start editing

Styling grouped axes

Tick size

You can customize the tick size for each grouped axis by providing a tickSize property in the groups array. The tickSize also affects the tick label position. Each item in the array corresponds to a group defined in the getValue() function.

  • Income
  • Expenses

Selecting groups

To target a specific group, use the data-group-index attribute as a selector. The example below has a yellow tick color for the last group and blue text for the first group.

  • Income
  • Expenses

Fixing tick label overflow issues

When your tick labels are too long, they're clipped to avoid overflowing. To reduce clipping due to overflow, you can apply an angle to the tick labels, use auto-sizing, or increase the axis size to accommodate them. In the demo below, the size of the x- and y-axes is modified to increase the space available for tick labels.

The first and last tick labels may bleed into the margin, and 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.

Passing props

The demo below illustrates all of the props available to customize axis rendering:

import { ScatterChart } from '@mui/x-charts/ScatterChart';

<ScatterChart
  // ...
  xAxis={{
    disableLine: false,
    disableTicks: false,
    label: "my axis",
    tickSize: 6,
  }}
/>

Playground

Text customization

To customize the text elements (tick labels and axis labels), use the tickLabelStyle and labelStyle properties of the axis configuration.

When not set, the default values for the textAnchor and dominantBaseline properties depend on the value of the angle property. You can test how these values behave and relate to one another in the demo below:

  • London
  • Paris
  • New York
  • Seoul
import { BarChart } from '@mui/x-charts/BarChart';

<BarChart
  // ...
  xAxis={[
    {
      labelStyle: {
        fontSize: 14,
      },
      tickLabelStyle: {
        angle: 45,
        fontSize: 12,
      },
    },
  ]}
/>

Playground

Adding tick label icons

A foreignObject element can be used to render non-SVG elements inside SVGs. You can leverage this to create components that interact with the charts data. In the demo below, custom tick labels are built by displaying an icon below the text.

Bear in mind that using foreignObject might prevent charts from being exported.

Custom axis rendering

You can fully customize how axis and their ticks are rendered by providing a component to the xAxis or yAxis slots. For more information about how to create custom axes, refer to the composition section.

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.