Make Apex-Charts x-axis display only few values

Question

I am making line charts using Apex-Charts and the data is like in 5000 unit at a time. I need to show only few on x-axis and then zoom accordingly. Here are the chart properties. Do I need to change here only or just need to change dynamically the category or label part?

chart: {
      type: 'area',
      stacked: false,
      fontFamily: 'Helvetica, Arial, sans-serif',
      foreColor: '#90A4AE', // chart font color
      zoom: {
        type: 'x',
        enabled: true,
        autoScaleYaxis: true,
      },

      animations: {
        enabled: true,
        easing: 'easeinout',
        speed: 800,
        animateGradually: {
          enabled: true,
          delay: 150,
        },
        dynamicAnimation: {
          enabled: true,
          speed: 350,
        },
      },

      height: 280,
      width: 1000,

      dropShadow: {
        enabled: true,
        color: '#000',
        top: 18,
        left: 7,
        blur: 10,
        opacity: 0.2,
      },

      toolbar: {
        show: true,
        offsetX: 0,
        offsetY: 0,
        autoSelected: 'zoom',
        tools: {
          download: true,
          selection: true,
          zoom: true,
          zoomin: true,
          zoomout: true,
          pan: true,
          reset: true,
          customIcons: [],
        },
        reset: 'Reset Zoom',
      },
    },
    colors: ['#FF0000', '#00FF00'],
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'straight',
      width: '3',
    },

    title: {
      text: this.textTime(this.jobStatus, index, this.chartLabels.length),
      align: 'left',
      offsetY: -3,
      offsetX: 30,
      fontsize: 30,
    },

    grid: {
      xaxis: {
        lines: {
          show: false,
        },
      },
      yaxis: {
        lines: {
          show: true,
        },
      },
      row: {
        colors: undefined,
        opacity: 0.5,
      },
      column: {
        colors: undefined,
        opacity: 0.5,
      },
      padding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      },
    },
    fill: {
      type: 'gradient',
      gradient: {
        shadeIntensity: 1,
        inverseColors: false,
        opacityFrom: 0.5,
        opacityTo: 0,
        stops: [0, 90, 100],
      },
      labels: this.chartLabels[index],
      markers: {
        size: 0,
        colors: undefined,
        strokeColors: '#fff',
        strokeWidth: 2,
        strokeOpacity: 0.9,
        strokeDashArray: 0,
        fillOpacity: 1,
        discrete: [],
        shape: 'circle',
        radius: 2,
        offsetX: 0,
        offsetY: 0,
        onClick: undefined,
        onDblClick: undefined,
        showNullDataPoints: true,
        hover: {
          size: undefined,
          sizeOffset: 3,
        },
      },

      xaxis: {
        type: 'category',
        labels: {
          style: {
            colors: '#90A4AE',
            fontSize: '12px',
            fontFamily: 'Helvetica, Arial, sans-serif',
            fontWeight: 400,
            cssClass: 'apexcharts-xaxis-label',
          },
          offsetX: 0,
          offsetY: 0,
        },
        title: {
          text: 'Iteration',
          offsetY: 0,
          offsetX: -5,
        },
      },
      yaxis: {
        title: {
          text: '',
        },
        labels: {
          formatter: function (val: any) {
            return (val / 1000000).toFixed(0);
          },
        },
        legend: {
          position: 'top',
          horizontalAlign: 'center',
          floating: true,
          offsetY: -17,
          offsetX: -5,
        },
      },
    }

Answer 1

xaxis: {
  tickAmount: 3,
}

Just enter the number how much values you need to show on x-axis.