[Solved]-Chart with Time axis only displaying first grid line and tick label (unitStepSize)-Chart.js

var ctx = document.queryselector('#canvas').getcontext('2d');
var mychart = new chart(ctx, {
    type: 'line',
    data: {
        labels: ['12:00', '12:10', '12:20', '13:20', '13:30'],
        datasets: [{
            label: 'temperatures',
            data: [20, 21, 22, 21, 23],
            backgroundcolor: 'rgba(75,192,192, 0.4)',
            bordercolor: '#4bc0c0',
            pointbackgroundcolor: 'black',
            tension: 0,
            fill: false
        }]
    },
    options: {
        scales: {
            xaxes: [{
                type: 'time',
                scalelabel: {
                    display: true,
                    labelstring: 'time'
                },
                time: {
                    unit: 'minute',
                    unitstepsize: 10,
                    format: "hh:mm",
                    displayformats: {
                        minute: 'hh:mm',
                        hour: 'hh:mm'
                    }
                }
            }],
            yaxes: [{
                scalelabel: {
                    display: true,
                    labelstring: 'temp'
                },
                ticks: {
                    max: 25,
                    min: 15,
                    stepsize: 1
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
<canvas id="canvas"></canvas>