ApexCharts line graph always loads zoomed in, need to show all data on first load

I have an apex chart line graph with a y axis that spans from 2.5 – 5 and an x axis that spans from 0 – 5. There are many data points on the graph, like a thousand, but I want them all to show in a smooth line on initial load of the graph.

For some reason, when I first load the page, the graph always loads with only five ticks in the X axis, and changing the tickAmount doesn’t effect anything until I start zooming out.

Also, when the page first loads, the graph is zoomed in to the first five datapoints. I need to see every datapoint at once, and I can’t see them until I start zooming out.

If I set the stepSize to 1 (or don’t set it) then it shows the correct range, up to 5, but the lines on the graph still go way off screen even though they should only ever stop at 5!

Then, when I do zoom out, if I zoom out too quickly it completely destroys the x axis values and for some reason the numbers start going up into the hundreds or thousands even though xaxis.max is set to 5!

Changing the range also doesn’t do anything, unless I’m doing it wrong. From docs it looks like I have to set range to max - min?

I have also tried disabling zoom but it stays zoomed in to the first five out of 1,000 datapoints and then I can’t see the whole graph

What am I missing here, I’m following all the docs and it is acting so strangely

I want a user to be able to hover over the line and see the numerical value of the datapoint hover in the tool tip, for all 1000 data points, including between x-axis ticks

Here’s my options:

chartOptions() {
      return {
        chart: {
          type: 'line',
          height: 'auto',
          zoom: {
            enabled: true,
          },
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth'
        },
        title: {
          text: 'Line graph',
          align: 'left'
        },
        xaxis: {
          type: 'numeric',
          min: this.xMin,
          max: this.xMax,
          tickAmount: 5,
          // stepSize: .2,
          title: {
            text: 'x axis'
          },
        },
        yaxis: {
          show: true,
          min: this.yMin,
          max: this.yMax,
          tickAmount: 10,
          title: {
            text: 'y axis'
          },
          labels: {
            formatter: function (val) {
              return val.toFixed(2);
            }
          },
        }
      };
    },