Labels on the X axis are skipping and not aligned to values in apexcharts

Question

So I'm getting the below when I'm adding a simple array of data to an apexchart..the data is coming in from an axios call to a database API.

the two issues I'm facing are that the X labels are clearly off from the data and that the small values of data are just not visible at all.

The options for the chart are

var options = {
    series: [],
    chart: {
    type: 'bar',
    height: 400,
    stacked: false,
    toolbar: {
      show: true
    },
    zoom: {
      enabled: false
    }
  },
  responsive: [{
    breakpoint: 480,
    options: {
      legend: {
        position: 'bottom',
        offsetX: -00,
        offsetY: 0
      }
    }
  }],
  plotOptions: {
    bar: {
      horizontal: false,
      borderRadius: 0,
      dataLabels: {
        total: {
          enabled: false,
          style: {
            fontSize: '13px',
            fontWeight: 900
          }
        }
      }
    },
  },

  legend: {
    position: 'right',
    offsetY: 40
  },
  fill: {
    opacity: 1
  }
  }; 

[
    {
        "x": 2013,
        "y": 2.2849
    },
    {
        "x": 2014,
        "y": 1767.8683
    },
    {
        "x": 2015,
        "y": 220518.6653
    },
    {
        "x": 2016,
        "y": 539326.3788
    },
    {
        "x": 2017,
        "y": 664183.2013
    },
    {
        "x": 2018,
        "y": 749090.8477
    },
    {
        "x": 2019,
        "y": 684358.5263
    },
    {
        "x": 2020,
        "y": 3792557.7233
    },
    {
        "x": 2021,
        "y": 5708727.556
    },
    {
        "x": 2022,
        "y": 6359475.7054
    },
    {
        "x": 2023,
        "y": 3144581.8257
    } ]