Skip to content

MarkArea on horizontal bar chart with inverse: true doesn't work for the first bar #21652

@eskimoblood

Description

@eskimoblood

Version

6.1.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=bar-simple

Steps to Reproduce

Paste the following option into the ECharts editor:

option = {
  yAxis: {
    type: 'category',
    data: ['San Francisco', 'Houston', 'Washington', 'New York', 'Miami', 'Boston'],
    inverse: true
  },
  xAxis: {
    type: 'value'
  },
  series: [
    {
      data: [28000, 33000, 30000, 27000, 31000, 39000],
      type: 'bar',
      markArea: {
        itemStyle: { color: 'rgba(0, 112, 242, 0.3)' },
        data: [
          [{ yAxis: 0 }, { yAxis: 0 }]
        ]
      },
      markLine: {
        lineStyle: { color: 'red', width: 2, type: 'solid' },
        symbol: 'none',
        data: [
          { yAxis: 0 },
          { yAxis: 0 }
        ]
      }
    }
  ]
};

Current Behavior

The markArea for {yAxis: 0} (San Francisco) renders on the second bar (Houston) instead of the first bar.

The markLine with the same {yAxis: 0} value correctly renders on San Francisco.

This only happens when the category axis has inverse: true. Removing inverse: true makes markArea render on the correct bar.

The offset is exactly +1 bar for all indices. A workaround is to pass index - 1 to markArea (e.g., {yAxis: -1} for bar 0, {yAxis: 1} for bar 2), but this should not be necessary.

Expected Behavior

markArea with [{yAxis: 0}, {yAxis: 0}] should highlight the same bar as markLine with {yAxis: 0} — the first category (San Francisco).

Environment

OS: macOS
Browser: Chrome
ECharts version: 6.1.0 (also reproducible on the latest version in the examples editor)

Any additional comments?

The root cause appears to be in BaseBarSeries.getMarkerPosition when called with startingAtTick: true (used by MarkAreaView). The targetTickId += 1 logic for the end boundary (isEnd && !alignTicksWithLabel) shifts correctly on non-inverted axes but causes a +1 band offset on inverted axes.

markLine does not have this issue because it calls getMarkerPosition without startingAtTick, using the bar layout offset path instead.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugenThis issue is in EnglishpendingWe are not sure about whether this is a bug/new feature.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions