Z-Index and Layers

SVG elements don't support CSS z-index. Instead, rendering order is determined by document order — elements rendered later appear on top. vccs manages this with a layer system.

Default rendering order

Chart elements are rendered in this order (bottom to top):

1. <CartesianGrid> — grid lines (background)
2. <ReferenceArea> / <ReferenceLine> — reference markers
3. <Area> — filled area regions
4. <Bar> — bar rectangles
5. <Line> — line curves
6. <Scatter> — scatter dots
7. Labels (<LabelList>)
8. Tooltip cursor
9. <Tooltip> — tooltip (HTML overlay, above SVG)
10. <Legend> — legend (HTML)

Teleport layer system

vccs uses Vue's <Teleport> to enforce consistent layering. The <Surface> component creates three SVG <g> layer refs:

• Graphical layer — where Area, Line, Radar render their paths
• Label layer — where LabelList renders labels
• Cursor layer — where tooltip cursors render

Components like <Area> and <Line> teleport their output into the graphical layer, ensuring they render in the correct z-order regardless of where they appear in your template.

Controlling overlap

When elements overlap, the rendering order above determines which appears on top. To change the visual stacking:

Reorder in template: Components rendered later in your template appear on top within the same layer:

<!-- Area renders behind Line -->
<ComposedChart :data="data">
  <Area data-key="area" fill="#14b8a6" :fill-opacity="0.3" />
  <Line data-key="line" stroke="#f97316" />
</ComposedChart>

Use ComposedChart for mixed types: <ComposedChart> lets you combine <Area>, <Bar>, and <Line> in a single chart with explicit ordering: