How to update and shift my graph along the x-axis?

I am trying to update and shift my graph along its x-axis, so that it includes a maximum of 5 values on the x-axis. This is what I am trying to achieve essentially. This is what I currently have:

    <body>
        <div id="chart"></div>

        <script type="text/javascript">

            var options = {
                chart: {
                    id: 'realtime',
                    height: 350,
                    type: 'line',
                    animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 1000,
                        dynamicAnimation: {
                            enabled: true,
                            speed: 1000
                        }
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke:{
                    curve: 'smooth'
                },
                series: [{
                    name: "Sales",
                    data: mData()
                }],
                title: {
                    text: 'Ajax Example',
                },
                noData: {
                    text: 'Loading...'
                }
            }

            var chart = new ApexCharts(
                document.querySelector("#chart"),
                options
            );

            chart.render();

            setInterval(function(){
                chart.appendData([{
                    name: "Sales",
                    data: mData()
                }]);
            }, 1000);
        </script>
    </body>

My code already updates my graph, but how can I shift my graph with the current code I have?

Solution

You can set max number of elements in xaxis like this

xaxis:{
  range: 5,
},

https://apexcharts.com/docs/options/xaxis/#range