Columns rendering not centered on ticks and crosshair rendering not centered on columns

[m3lis]

Hello,

I have a column chart for which the columns are not rendered exactly in the middle of the tick, and the crosshair when hovering over them does not render exactly in the middle of the column either.

The placement on the ticks seems to be variable (sometimes more left, sometimes centered on a tick) even though my x values are rounded precisely to match the tick value.

I tried pointPlacement: "on" but it did not change anything, and I also set 'crisp' to false, as that caused variable-sized gaps among the columns.

Screenshot 2024-09-18 171707.png (39.42 KiB) Viewed 942 times

For example, in my screenshot, at 08:00 the column is centered on the tick, but at 12:00 it is way off. Also, you can see the crosshair is rendered towards the left of the column.

Please suggest on a solution.

[andrzej.b]

Hi @m3lis,

Thanks for the question!

Would you mind reproducing the issue in an online editor so I can help you with it? As there are many factors that can affect alignment, like borderWidth, column.grouping, etc, it's hard to suggest a solution without seeing your code.

Best regards,

[m3lis]

I can reproduce it in this fiddle: https://jsfiddle.net/r8sgoj4n/40/

If you notice closely, the ticks at 12:00 and 20:00 are not aligned with the center of the column, even though the timestamp of the datum is exact.

ff.png (14.69 KiB) Viewed 857 times

Additionally, I think it is the same issue that is being discussed in this ticket: https://stackoverflow.com/questions/606 ... mn-crisp-s
but it seems there was no solution to that

[andrzej.b]

Hi,

I think that I see the issue here. You have a dense, dynamic column chart with datetime xAxis, default dataGrouping and zoom. Our algorithm to calculate the most optimal tick positions takes into account a lot of data, and when so many things can change dynamically, ticks can get off by +-2 pixels. Without setting constraints - e.g. dropping zoom and data grouping - there is no straightforward way to improve precision. This is just a trade-off for dynamic, flexible chart rendering. The more boundaries you define, the more precise your result will be.
If you think this should be improved, you can propose a feature request on our GitHub repo here.

If anything else pops up, please let us know.

Best regards,

[m3lis]

Hello,

I have dataGrouping set to false in my code, and I give the chart enough width so as not to cause cramming among the bars, yet the tick placement stays the same even in high width.

Are there any other parameters that affect it that I might be able to tweak? I tried changing pointPadding, and that fixes some cases but causes issues to others.

[andrzej.b]

Hi,

You can try to play with several options to change columns and ticks behaviour, related to:
points:

• - pointInterval
  - pointPadding
  - pointRange
  - pointWidth

and ticks:

• - tickInterval
  - tickPixelInterval
  - tickPositioner - using it you can define your own tick positioning logic with a callback
  - tickPositions
  - tickWidth

But as you already noted, they are not flexible enough. Tick rendering precision is limited in some scenarios, and once again, I invite you to raise the issue on GitHub.

If anything else pops up, please let us know.

Best regards,