Adjust X Axis Step in ChartJS

Question

I work on ChartJS. I have some values which are saving according to hour and date from database. I want to adjust X axis by hour. Now, all my hour and minute showing on X axis and I want to just showing hours. I write a script for that in my PHP file. But nothing happened. How can I change X axis step?

Here is my script code:

<script>

$(document).ready(function(){

 var data = <?php echo json_encode($data) ?>;


        var gun= [];
        var guc = [];
        var saat = [];
        var hour = [];
        for(var i in data) {
            gun.push(data[i].gun);
            guc.push(data[i].Guc);
            saat.push(data[i].saat);
            hour.push(data[i].hour);
        }

        var chartdata = {
            labels: saat,
            datasets: [
                {label: "Güç",
                    fill: true,
                    lineTension: 0.1,
                    backgroundColor: "rgba(211, 72, 54,0.5)", 
                    borderColor: "rgba(211, 72, 54, 1)", 
                    pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
                    pointHoverBorderColor: "rgba(211, 72, 54, 1)",
                    steppedLine: true,
                    data: guc

                }

            ]

        };

        var ctx = $("#mycanvas7");

        var LineGraph = new Chart(ctx, {
            type: 'line',
            data: chartdata,
            options: {
                min: 0,
                max: 23,
                stepSize: 24
            }

        });
});     
</script>

Answer 1

xAxes: [{
  ticks: {
    autoSkip: true,
    maxTicksLimit: 24
  }
}]

This will help you I guess