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.
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:
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
markAreawith[{yAxis: 0}, {yAxis: 0}]should highlight the same bar as markLine with{yAxis: 0}— the first category (San Francisco).Environment
Any additional comments?
The root cause appears to be in
BaseBarSeries.getMarkerPositionwhen called withstartingAtTick: true(used by MarkAreaView). ThetargetTickId += 1logic for the end boundary (isEnd && !alignTicksWithLabel) shifts correctly on non-inverted axes but causes a +1 band offset on inverted axes.markLinedoes not have this issue because it callsgetMarkerPositionwithoutstartingAtTick, using the bar layout offset path instead.