React-Apexcharts how to step through the x-axis within a range

Im new to Apexcharts, and Im working on implementing a line chart. I have encountered a question about the x-axis of the chart while I am trying to apply an array with a long length(as big as an array of length greater than 500). The x-axis’s unit is based on time in the format of "mm:ss", the timestamp in the array converts to "mm:ss" has identical value due to accuracy. For example, in the timestamp array, there are two values "2021-02-16T22:47:30.369704+00:00" and "2021-02-16T22:47:30.119704+00:00", these two values are both "47:30" while convert into a format of "mm:ss". In this case my x-axis values looks like "47:29", "47:30", "47:30", "47:30", "47, 31" with duplicates. I directly passed the array that holds the converted timestamp to the xaxis config for apexcharts like so:

  // This array is not hardcoded like below, this is for elaborate purpose
  // In order to get the values in the array, I made a network request which returned to big
  // amount of data requires me to plot in to the line chart
  cosnt arrayOfMinutesSec = ["00:00", "00:01", "00:01", "00:01", "00:02", "00:02", "00:02", 
                             ...., "04:00"];
  const options = {
    ...
    xaxis: {
      categories: arrayOfMinutesSec,
      crosshairs: {
        show: true
      }
    }
    ...
  }

Is there anyway to tell the graph to show by step within a range instead of showing every single element in the array? So something like stepping every 5 seconds "00:00", "00:05", "00:10", ..., "03:55", "4:00"

Much appreciated for any kind of help.

Answer

I just figured it out. There is a tickAmount property inside the xaxis property of the options configuration, which allows you to divide the xaxis by the value you pass in.