How can I show all the data in graph but only few x-axis ticks?

plotly.js
1

I am using plotly. I’m having a lot of values in my x-axis array(around 1000 values which are of type string).I want to show all the data in the graph but only few ticks on x-axis. Maybe like tick for every 120th value in the x-axis array on the x-axis of graph.

My xData array includes time as string.

Here’s what my sample data looks like

var xData = ['08:01','08:02','08:03',....,'08:59','09:00','09:01','09:02','09:03',....,'09:59','10:00','10:01',....,'20:00'];
var yData = [4367,4958,5968,3764,3754,.....3847];

I have tried this but doesn’t work.

<div id="graph">
    <script>
        var layout = {
            hovermode:'closest',
            paper_bgcolor:'rgba(0,0,0,0)',
            plot_bgcolor:'rgba(0,0,0,0)',
            font: { color: '#ffffff'},
            height: 700,
            xaxis: {
                titlefont: {color: '#ffffff'},
                tickfont: {color: '#ffffff'},
                tickmode: 'linear',
                tickangle: -90,
                dtick: 120,
                showgrid: false,
                showline: false,
                zeroline: false
            },
            yaxis: {
                side: 'right',
                titlefont: {color: '#ffffff'},
                tickfont: {color: '#ffffff'},
                ticklen: 30,
                showgrid: false,
                showline: false,
                zeroline: false
            },
            legend: {
                x: 0,
                y: 1,
                traceorder: 'normal',
                font: {
                  family: 'sans-serif',
                  size: 12,
                  color: '#ffffff'
                }
            }
        };
        Plotly.plot('graph',[{
            x:xData,
            y:yData,
            mode:'lines'
        },{
            x:xData,
            y:yData,
            mode:'lines'
        },{
            x:xData,
            y:yData,
            mode:'lines'
        }], layout);
    </script>
</div>

I want to show full data but few x-axis ticks.

2

See example: https://plot.ly/javascript/axes/#enumerated-ticks-with-tickvals-and-ticktext