[Bug] `xAxis.splitArea.interval` function does not color background as expected

[thehale]

Version

5.4.3

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=bar-simple&lang=ts&code=MYewdgzgLgBAFiArgJwjAvDA2gKBjAbxgBMBDKAUwC4YByAJgAZ6AWAWkYEY37PaAaeElQ1OMAL6CA9FJgBlRGDIBPPIRLlqdJqw7d6AZgFCUEGgA4J02QFlwKtUTKUaDZuy48WxhKZoA2KxgZGAAVRAoIB3wnTVcdD30AVh9hMxgAdiCQgHUKYjBI6PVnLTddT3p_VL9MgDpLSWDZULhTYtiXbXc9HgyakRgDbNkAMWQASw6NLvLEnnMB9MY6sSaQuXIUadL4nsqATiXREflFHbjuiu4DRmOYTkZTuyVSVRiZsoTegz5BX0G_jqw3WLQiUTejk-ewq9D09yyoJgeQKRUhH12Vw8cOY93MdSSp1a7XRJUucw4OKM_zSNAOp3GU1JnS--xx3hptTWzXkW2QDgAugBuHA4ABmimAUAm4BgEF8ABtiAAhCgAYRACpAyHyAAoJkoKAAPGhgRAAWwARhRkABKGiWkCaiikMCENQhHVQFBug3EY0wACkMHoGEwjDUXp9MD9AeDWXQiZgTwAPimY4ajUHMmHMIEeQB3CgUADWFCUEBw4lFIAADtLZZgCGojQBBI0TdLN_D4KDKWtlYCaADm2uUAjU-AgtYVEygrZ1pBo3Z7U4QBZoUGQEX4k57BsoyAAbqQFTR9ZnBCeFRFbRgAHxyxUq9Wa7V62NG2271fV_CSNRlHbTtlxgPsB1ca8IloKw1AgG0JkiGhcFXFdV2cJcTFQOpzVIWtdV1OA73QR8sDgOpSn-OoAQgAVvz3Xt-zKS1SGQCdV3wOcKHNOQ-wVLQ0I40AtWQc9OlIABJTMJGIx95SQJVVQ1ES9QwqT_S_GAAH4YAAImHHVlF0mAaF0y0bwoXSGIkPc_xgAUqyFIA

Steps to Reproduce

1. Open the linked Minimal Reproduction
2. Observe that both xAxis.splitArea.interval and series.itemStyle.color use the same conditional to control coloring.
3. Observe that the grey bars do not line up with the light grey backgrounds.
4. Modify the conditional in shouldBeColored (e.g. swapping which return is commented out) and observe that the discrepancy persists across a variety of conditionals.

Current Behavior

The bars themselves are colored as expected, but the background coloring from splitArea does not match even though both use the same conditional as the bar colors.

For example, in the following image, I was trying to add a background color for the weekends. The bars themselves colored correctly, but the splitArea instead only colored every 7th section.

Similarly, attempting to color a specific interval creates bizarre splitArea coloring:

Same for attempts to space out the coloring (e.g. 1 off, 4 on, repeating)

Expected Behavior

When the xAxis.splitArea.interval function returns true, I expect the area to have a colored background.

In the case of the given example, wherever the bars are colored grey, I expect the splitArea background to also be colored.

Environment

- OS: Windows
- Browser: Microsoft Edge Version 121.0.2277.83 (Official build) (64-bit)
- Framework: n/a (in the browser sandbox) and Vue@3

AND

- OS: Linux (Fedora)
- Browser: Firefox 122.0
- Framework: n/a (in the browser sandbox) and Vue@3

Any additional comments?

No response

[helgasoft]

First, I think API docs for xAxis.splitArea.interval needs to be fixed. Looks like text was just copied from xAxis.axisLabel.interval.

Second, splitArea.interval has to be a fixed number and defines the alternation frequency of two colors. OTOH, bar.itemStyle.color could be an arbitrary value. So I do not think these two can be compared.

If you want to color weekends, try markArea.

[thehale]

splitArea.interval has to be a fixed number ... OTOH, bar.itemStyle.color could be an arbitrary value. So I do not think these two can be compared.

The dynamic bar.itemStyle.color was a visual aid to communicate my desired behavior from splitArea.interval. I was comparing final output on the rendered graph, not the intermediate outputs of the custom functions. Sorry if that was confusing.

If you want to color weekends, try markArea.

I did try that, but performance plummeted for larger datasets (e.g. marking all the weekends in a chart with multiple years of data), while splitArea stayed snappy (though wrong).

splitArea.interval ... defines the alternation frequency of two colors.

If that's the expected behavior, it seems like there's still a bug, since none of the charts in my minimal example had an alternation frequency that could be represented by a single number. Furthermore, if a single number is expected, I would expect echarts to invoke my callback once per axis. In reality, echarts invokes my callback for each segment along the axis (evidenced by adding a console.log(index, value) to the callback).

Perhaps then, this ticket is not a bug report, but a feature request for more customizability of the alternation frequency of splitArea.interval. To me, the simplest, most flexible option would be clarifying the behavior of the current API per the TypeScript definition, specifically that a call to (index, value) => boolean for each axis segment determines the color of that segment's background.

• The current 'auto' could be represented by (index, value) => index % 2
• The current number could be represented by (index, value) => Math.floor(index / NUMBER) % 2.
• Full customizability can be achieved with (index, value) => /* something custom with index and/or value */

[helgasoft]

If you want to color weekends, try markArea.

I did try that, but performance plummeted for larger datasets (e.g. marking all the weekends in a chart with multiple years of data), while splitArea stayed snappy (though wrong).

Then try markLine - it is snappy and accurate, but the width is fixed (non-responsive) - Demo Code.

[thehale]

If you want to color weekends, try markArea.

I did try that, but performance plummeted for larger datasets (e.g. marking all the weekends in a chart with multiple years of data), while splitArea stayed snappy (though wrong).

Then try markLine - it is snappy and accurate, but the width is fixed (non-responsive)

Thanks for the demo!

While markLine initially looks promising, the non-responsiveness is a big downside. In particular, when zooming in, the small line starts to look like a second bar instead of a background highlight. I'll experiment to see if I can design a wrapper which re-renders the graph on zoom to get the responsiveness I would need for my use case.

That said, the viability (or not) of markLine as workaround doesn't change the unexpected behavior of splitArea.interval.