Z-Index and layers

zIndex and layers were introduced in version 3.4.

Recharts will render your components in a specific order by default. For example, Lines are on top of Areas, and Areas are on top of background.

You can see the specific defaults in DefaultZIndexes.tsx.

Components with the same z-index are rendered in the order they appended to the DOM: later components are on top of earlier ones. This is called the “painting order”, or a “painter's algorithm”.

Custom z-index

You can pass a number to the zIndex prop in various components:

Custom SVG and other Recharts components without direct zIndex support render as if they had zIndex=0. If you want to set a custom zIndex, wrap your component in ZIndexLayer.

Limitations

SVG does not support z-index directly. Recharts has a custom implementation that at first looks and feels like the Real z-index but if you dig long enough you will discover that there are some limitations:

• z-index only works within a single chart. You cannot have a component in one chart overlap a component in another chart using z-index. You can set style={{ zIndex: 123 }}on the chart container itself to have the whole chart overlap another chart. But you cannot have individual components overlap across charts.
• The painter's algorithm follows DOM insertion order, not JSX order. This means that if you have conditional rendering in your JSX, the actual DOM insertion order may not match the visual order you expect. If you rely on specific painting order, it's safer to use explicit zIndex values.