Guides

Z-Order and Layers

The order in which chart elements paint, and how to change it

SVG has no z-index: an element painted later covers an element painted earlier. A chart paints its SVG content in three tiers, bottom to top.

  1. Template content and the tooltip cursor. The grid, axes, reference elements and your own custom overlays paint in template order. The tooltip cursor paints above them.
  2. Series. Area, Bar, Line, Scatter and Radar paint in template order. A series declared later covers a series declared earlier, whatever its type. Pie, RadialBar and Funnel paint with the template content in tier 1, also in template order.
  3. Labels. LabelList and series labels paint above all series, so a series never hides a label.

The tooltip and the legend are HTML elements on top of the SVG.

Change the order

Reorder the series in the template. Here the Line is declared before the Area, so the opaque Area covers it:

<ComposedChart :data="data">
  <Line data-key="signups" />
  <Area data-key="visits" :fill-opacity="0.9" />
</ComposedChart>

Declare the Area first to put the Line on top. The order is the same on the server, after hydration, with reduced motion, and after data updates.

Copyright © 2026