Skip to content
Bug reportAug 31, 2026· 0:24· 10 views

ECharts: markLine label z2 is ignored — declaration order determines rendering order instead

0:24 total

Comments · 0

Be the first to comment.

Bug report— by SceneRecap AI

mediummarkLine component / z-index rendering pipeline
url: https://echarts.apache.org/examples/en/editor.html?c=line-simpleapplication: Apache ECharts Editor

Repro steps

  1. 1.Configure a series markLine with two data items that visually overlap.
  2. 2.Set `z2: 100` on the first declared markLine item (red label: 'z2=100 - should be ON TOP').
  3. 3.Set `z2: 5` on the second declared markLine item (blue label: 'z2=5 - should be BEHIND').
  4. 4.Render the chart and inspect the z-ordering of the markLine labels and lines.

Expected

The first markLine item with higher `z2` (100) should be rendered in front of / on top of the second markLine item with lower `z2` (5).

Actual

The second markLine item (`z2: 5`) renders on top of the first markLine item (`z2: 100`), showing that `z2` is ignored and elements are rendered strictly by array declaration order.

Evidence

visualThe blue markLine label ('z2=5 - should be BEHIND') is visibly drawn over the red markLine label ('z2=100 - should be ON TOP') on the canvas.
visualHovering across the markLine segments confirms the blue layer remains rendered above the red layer despite having a lower z2 value.
Issue markdown (copy-paste ready)
### Description
When specifying `z2` on individual `markLine.data` items, ECharts ignores the `z2` property and renders the mark lines and labels in array declaration order. As a result, items declared later in the array always render on top of earlier items even when assigned a lower `z2` value.

### Steps to Reproduce
1. Create a line chart with a `markLine` configuration.
2. In `markLine.data`, add a first item with `z2: 100` and a visible background label.
3. Add a second item with `z2: 5` and a visible background label overlapping the first item's position.
4. Render the chart.

### Expected Result
The item with `z2: 100` renders on top of the item with `z2: 5`.

### Actual Result
The item with `z2: 5` renders on top simply because it is declared second in the array.

*Recorded with SceneRecap.*

Your recordings could explain themselves too.

Free plan · silent recordings welcome · bug reports included.

Try SceneRecap free
ECharts: markLine label z2 is ignored — declaration order determines rendering order instead · SceneRecap