[Axis] Incorrect x axis ticks on xy charts

**Describe the issue**

Using `xNice` on an xy chart (i.e. `BarSeries`, `LineSeries`, etc.) the axis jumps on narrow screens to incorrect values.

**To Reproduce**
Steps to reproduce the behavior:
1. Load the example playground below. (codesandbox is busted)
2. Now adjust the width of the browser from very wide to very narrow.
3. Notice the `0` tick shifts on smaller charts to an inaccurate placement on the chart.

```tsx
export function Playground() {
  return (
    <div className="App">
      <Chart size={['100%', 500]}>
        <Axis id="count" title="Count" position={Position.Left} />
        <Axis id="x" title="Goods" position={Position.Bottom} />
        <LineSeries
          id="lines"
          xNice
          xScaleType={ScaleType.Linear}
          xAccessor="x"
          yAccessors={['y']}
          splitSeriesAccessors={['group']}
          data={data}
        />
      </Chart>
    </div>
  );
}
```

<details><summary>Sample data</summary>
<p>

```ts
export const data = [
  {
    group: 'Elastic-filebeat',
    x: -1000000,
    y: 2,
  },
  {
    group: 'Elastic-filebeat',
    x: 0,
    y: 4225639,
  },
  {
    group: 'Elastic-filebeat',
    x: 1000000,
    y: 16756,
  },
  {
    group: 'Elastic-filebeat',
    x: 2000000,
    y: 2381,
  },
  {
    group: 'Elastic-filebeat',
    x: 3000000,
    y: 1032,
  },
  {
    group: 'Elastic-filebeat',
    x: 4000000,
    y: 465,
  },
  {
    group: 'Elastic-filebeat',
    x: 5000000,
    y: 102,
  },
  {
    group: 'Elastic-filebeat',
    x: 6000000,
    y: 141,
  },
  {
    group: 'Elastic-filebeat',
    x: 7000000,
    y: 30,
  },
  {
    group: 'Elastic-filebeat',
    x: 8000000,
    y: 41,
  },
  {
    group: 'Elastic-filebeat',
    x: 9000000,
    y: 8,
  },
  {
    group: 'Elastic-filebeat',
    x: 10000000,
    y: 2,
  },
  {
    group: 'Elastic-filebeat',
    x: 11000000,
    y: 4,
  },
  {
    group: 'Elastic-filebeat',
    x: 12000000,
    y: 43,
  },
  {
    group: 'Elastic-filebeat',
    x: 13000000,
    y: 1,
  },
  {
    group: 'Elastic-filebeat',
    x: 14000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 15000000,
    y: 4,
  },
  {
    group: 'Elastic-filebeat',
    x: 16000000,
    y: 26,
  },
  {
    group: 'Elastic-filebeat',
    x: 17000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 18000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 19000000,
    y: 4,
  },
  {
    group: 'Elastic-filebeat',
    x: 20000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 21000000,
    y: 2,
  },
  {
    group: 'Elastic-filebeat',
    x: 22000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 23000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 24000000,
    y: 12,
  },
  {
    group: 'Elastic-filebeat',
    x: 25000000,
    y: 2,
  },
  {
    group: 'Elastic-filebeat',
    x: 26000000,
    y: 1,
  },
  {
    group: 'Elastic-filebeat',
    x: 27000000,
    y: 2,
  },
  {
    group: 'Elastic-filebeat',
    x: 28000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 29000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 30000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 31000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 32000000,
    y: 13,
  },
  {
    group: 'Elastic-filebeat',
    x: 33000000,
    y: 1,
  },
  {
    group: 'Elastic-filebeat',
    x: 34000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 35000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 36000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 37000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 38000000,
    y: 1,
  },
  {
    group: 'Elastic-filebeat',
    x: 39000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 40000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 41000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 42000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 43000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 44000000,
    y: 3,
  },
  {
    group: 'Elastic-filebeat',
    x: 45000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 46000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 47000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 48000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 49000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 50000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 51000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 53000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 55000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 58000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 59000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 61000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 63000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 64000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 85000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 93000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 105000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 106000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 107000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 108000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 112000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 117000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 118000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 121000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 133000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 140000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 156000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 160000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 163000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 164000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 166000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 199000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 224000000,
    y: undefined,
  },
  {
    group: 'Elastic-filebeat',
    x: 273000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 0,
    y: 3170486,
  },
  {
    group: 'Logstash',
    x: 1000000,
    y: 22274,
  },
  {
    group: 'Logstash',
    x: 2000000,
    y: 9718,
  },
  {
    group: 'Logstash',
    x: 3000000,
    y: 6385,
  },
  {
    group: 'Logstash',
    x: 4000000,
    y: 1113,
  },
  {
    group: 'Logstash',
    x: 5000000,
    y: 89,
  },
  {
    group: 'Logstash',
    x: 6000000,
    y: 52,
  },
  {
    group: 'Logstash',
    x: 7000000,
    y: 9,
  },
  {
    group: 'Logstash',
    x: 8000000,
    y: 34,
  },
  {
    group: 'Logstash',
    x: 9000000,
    y: 49,
  },
  {
    group: 'Logstash',
    x: 10000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 11000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 12000000,
    y: 6,
  },
  {
    group: 'Logstash',
    x: 13000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 14000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 15000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 16000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 17000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 18000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 19000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 20000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 21000000,
    y: 1,
  },
  {
    group: 'Logstash',
    x: 26000000,
    y: 2,
  },
  {
    group: 'Logstash',
    x: 31000000,
    y: 1,
  },
  {
    group: 'Logstash',
    x: 32000000,
    y: 2,
  },
  {
    group: 'Logstash',
    x: 36000000,
    y: 1,
  },
  {
    group: 'Logstash',
    x: 38000000,
    y: 2,
  },
  {
    group: 'Logstash',
    x: 48000000,
    y: 1,
  },
  {
    group: 'Logstash',
    x: 53000000,
    y: 1,
  },
  {
    group: 'Logstash',
    x: 72000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 73000000,
    y: 1,
  },
  {
    group: 'Logstash',
    x: 80000000,
    y: 3,
  },
  {
    group: 'Logstash',
    x: 111000000,
    y: 2,
  },
  {
    group: 'Logstash',
    x: 119000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 125000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 157000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 188000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 216000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 217000000,
    y: undefined,
  },
  {
    group: 'Logstash',
    x: 218000000,
    y: undefined,
  },
  {
    group: 'Elastic-metricbeat',
    x: 0,
    y: 2308061,
  },
  {
    group: 'Elastic-metricbeat',
    x: 1000000,
    y: 13168,
  },
  {
    group: 'Elastic-metricbeat',
    x: 2000000,
    y: 644,
  },
  {
    group: 'Elastic-metricbeat',
    x: 3000000,
    y: 571,
  },
  {
    group: 'Elastic-metricbeat',
    x: 4000000,
    y: 24,
  },
  {
    group: 'Elastic-metricbeat',
    x: 5000000,
    y: 9,
  },
  {
    group: 'Elastic-metricbeat',
    x: 6000000,
    y: 10,
  },
  {
    group: 'Elastic-metricbeat',
    x: 7000000,
    y: 5,
  },
  {
    group: 'Elastic-metricbeat',
    x: 8000000,
    y: undefined,
  },
  {
    group: 'Elastic-metricbeat',
    x: 9000000,
    y: undefined,
  },
  {
    group: 'Elastic-metricbeat',
    x: 10000000,
    y: undefined,
  },
  {
    group: 'Elastic-metricbeat',
    x: 11000000,
    y: undefined,
  },
  {
    group: 'Elastic-metricbeat',
    x: 12000000,
    y: undefined,
  },
  {
    group: 'Elastic-metricbeat',
    x: 21000000,
    y: 2,
  },
  {
    group: 'Elastic-metricbeat',
    x: 22000000,
    y: 2,
  },
  {
    group: 'Elastic-metricbeat',
    x: 71000000,
    y: undefined,
  },
  {
    group: 'Elastic-auditbeat',
    x: 0,
    y: 315492,
  },
  {
    group: 'Elastic-auditbeat',
    x: 1000000,
    y: 7,
  },
  {
    group: 'Elastic-packetbeat',
    x: 0,
    y: 48429,
  },
  {
    group: 'Elastic-packetbeat',
    x: 1000000,
    y: 26,
  },
  {
    group: 'Elastic-packetbeat',
    x: 2000000,
    y: 9,
  },
  {
    group: 'Elastic-packetbeat',
    x: 3000000,
    y: 14,
  },
  {
    group: 'Elastic-packetbeat',
    x: 4000000,
    y: 1,
  },
  {
    group: 'Elastic-packetbeat',
    x: 5000000,
    y: 1,
  },
  {
    group: 'Elastic-winlogbeat',
    x: 0,
    y: 8328,
  },
  {
    group: 'Elastic-winlogbeat',
    x: 1000000,
    y: 53,
  },
  {
    group: 'Elastic-winlogbeat',
    x: 2000000,
    y: undefined,
  },
  {
    group: 'Elastic-winlogbeat',
    x: 3000000,
    y: undefined,
  },
];

```

</p>
</details> 

**Expected behaviour**

The `0` baseline and all the data is rendered accurately for niced domains.

**Screenshots**

https://github.com/user-attachments/assets/815b03d3-9eee-4c48-b1eb-87bb49cb5ee5

**Version (please complete the following information):**
 - Elastic Charts: `latest`

**Additional context**

Only happens with _nicing_ the x axis.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Axis] Incorrect x axis ticks on xy charts #2687

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Axis] Incorrect x axis ticks on xy charts #2687

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions