[Bug] : candlestick and bar chart ticks and split lines with xAxis of type time are not aligned

nileio commented 1 year ago

Version

5.4.1

Link to Minimal Reproduction

https://jsfiddle.net/7n6v38em/

Steps to Reproduce

create two grids one for the candlestick series, and the other for the bar series.
xAxis is of type 'time' for both , and yAxis is default of type 'value'
the datasource is the same for both.. the candlestick is using open,close,low,high dimensions, and the bar chart is using 'volume' dimension

Current Behavior

the split and tick lines are not aligned between the candlestick and bar charts. please check and run the fiddle

Notice that the upper grid vertical split lines do NOT align to the bottom grid vertical split lines
also notice that the axisPointer line is not a straight line between both the grids.
also notice that the first bar on the bottom grid starting point is aligned to the left edge of the grid whereas the candlestick first candle is overflowing outside of the left edge

Expected Behavior

the split and tick lines should align perfectly to each other because the series data is the same, and the xAxis type is the same being 'time'.. this is an issue because the same item should be vertically aligned with one another. The candlestick candles should align perfectly to the volume bars for each tick, ticks should align, and split lines should align in straight line.

This behavior works as expected if we change the xAxis type from 'time' to 'category'. The problem though with using 'category' is that all formatting of the data has to be done manually, and also 'category' type does not support boundaryGap with a percentage which we require.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

change the xAxis type for both to 'category' and notice the difference. In this case both the grid split lines and ticks align perfectly.. however, we do not want to be forced to use 'category' because it requires us to do lots of manual formatting of labels, etc. also category does not support boundaryGap with a percentage on both sides which is important for us. Kindly let us know if there is a solution or this is a bug

helgasoft commented 1 year ago

not-a-bug Current Behavior does not contradict and Expected Behavior does not match the documentation. I think the title here should be changed from [Bug] to "[Feature] make candlestick behave like bar chart respecting candlestick.barWidth when xAxis is type time".

The problem is that candlestick.barWidth is not taken into account in xAxis, as bar.barWidth is. This is illustrated, as you said, by "candlestick first candle is overflowing outside of the left edge". A humble workaround is to add barCategoryGap: '90%' to the volume serie. Vertical alignment will be practically fixed, but volume bars will look anorexic.

nileio commented 1 year ago

@helgasoft thanks for your response. can you clarify - are you saying that this behavior is solely due to the difference in barWidth between bar and candlestick series ? If that's the case, why does it work perfectly well when both xAxis are of type 'category' .. I am not sure I fully understand why this should be a feature ?! I never know what that option barCategoryGap is but will give it a go

nileio commented 1 year ago

if I use barCategoryGap: '90%' it actually aligns perfectly however the volume bars look like they been on a diet ! they are thin and almost look like lines rather than bars ! so I am afraid this won't be a workaround. I played with barWidth in every possible way but it never works perfectly.. is this "feature" requires a lot of work to do ?

helgasoft commented 1 year ago

this behavior is solely due to the difference in barWidth between bar and candlestick series ? If that's the case, why does it work perfectly well when both xAxis are of type 'category'

Yes, I think it's obvious - candlesticks don't have barWidth with time axis. But they do with category axis - also true. And this is not a bug, just the way developers decided to handle it. I do not like it more than you do and think charts should look consistent regardless of axis type. But ultimately, a hero with enough time and knowledge has to sit down and do it in code.

nileio commented 1 year ago

Yes, I think it's obvious - candlesticks don't have barWidth with time axis.

@helgasoft - I am not sure this is really true. I can set barWidth and it gets applied with time Axis - no problem. for example try barWidth: '80%' - this works on candlestick even if the xAxis is of type 'time'.. I do not entirely agree it should be considered a "feature" ! this is why I have the incident ... so hoping someone from the core team who knows this part well can provide a comment. I feel it is something small to change to get the candlesticks to start right from the edge of the grid and then apply any boundaryGap setting

xmatthias commented 8 months ago

@nileio did you get anyplace with this, or is it simply an open, most likely forgotten issue ?

apache / echarts