markArea xAxis does not work as expected for category axis and bar series

[MINDoSOFT]

Version

4.7.0

Reproduction link

https://jsfiddle.net/758vs6xe/

Steps to reproduce

You have an xAxis of type category and you have a bar series. And you want to markArea of a specific category. You can't because the markArea starts drawing from the center of the bar.

In the example we have the days of the week as categories.
With markArea 'Mon' - 'Tue' you see something.
With markArea 'Wed' - 'Wed' you see nothing.

What is expected?

For markArea to mark the specific bar category.

What is actually happening?

It doesn't mark it.

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[black-lattice]

Has this problem been solved?

[v1talii-dev]

are there any workarounds?

[sthenault]

I've also hit this problem and would be interested in a fix or workaround (looked through the doc and didn't found anything that could do the trick easily)

[dynamikus]

any workarounds? I am having the same problem?

[warren30815]

You can set itemStyle: { borderWidth: 10 } to get a highlight area
like: https://jsfiddle.net/7hmt89ko/6/

[sagarey]

Add a background xAxis with boundaryGap: false, then add markArea in it