x axis ticks are misaligned in bar charts that have more than 10 ticks

[lovasoa]

Description

Steps to Reproduce

1. Create a bar chart with more than 10 bars. For instance, a bar chart with 11 bars :

new ApexCharts(chart_div, {
  chart: { type: "bar" },
  series: [{
      data: [1,2,3,4,5,6,7,8,9,10,11].map(x => ({x, y:x}))
  }]
}).render();

2. Observe the placement of x axis ticks

Expected Behavior

Each tick should fall below a bar. The x axis values should be regular.

Actual Behavior

The x axis ticks are: 1, 2, 3, 4, 5, 7, 8, 9, 10, 11 (6 is missing)

Ticks 0 and 11 line up perfectly under their bars. Everything in between is “pulled” toward the chart’s center around the missing 6.

• Ticks 1–5 each sit slightly to the right of their bar centers.
• There is no tick 6 at all.
• Ticks 7–10 each sit slightly to the left of their bar centers.
• The maximum offset occurs right around where the 6 should be; the further you move toward that gap, the larger the shift.

Screenshots

Reproduction Link

https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/yyBJvMq

This is a followup on #4858

[lovasoa]

Here is how matplotlib handles this situation, for instance:

They always generate ticks at a regular interval: 1 tick for every bar, then 1 every 2 bars, then 5, then 10...
They do not necessarily have a tick below both the first and the last bar.
Every tick always falls exactly below a bar.

x = list(range(1, n + 1))
plt.bar(x, x)