Plot.ly in Timemode: fixed grid size

Question

I have a timemode chart with timestamps on the x-axis. The dataset is appromximately 20 seconds long and plot.ly automatically sets a tick label every 2 seconds on the x-axis, which is fine.

However, the x-axis grid lines are automatically set to the positions of the ticks. I would like to have fix grildlines every second, independent from the x-axis timestamps/ticks.

Is that possible?

Answer 1

As far as I know you cannot do that directly but you could add the grid yourself via shapes .

 var data = { x: [], y: [], type: 'scatter' }; var lines = []; //get a random time series var startTime = new Date().getTime(); for (var i = 0; i < 20; i += 1) { data.x.push(startTime + i * 1000); data.y.push(i % 5 * Math.random()) } //create a line every 1000 msecs for (i = Math.min(...data.x); i < Math.max(...data.x); i += 1000) { lines.push({type: 'line', xref: 'x0', x0: i, x1: i, y0: Math.min(...data.y), y1: Math.max(...data.y), layer: 'below', line: {color: 'gray'} } ); } var layout = {xaxis: {type: 'date', dtick: 2000, showgrid: false }, yaxis: {showgrid: false}, shapes: lines }; Plotly.newPlot('myDiv', [data], layout); 

 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <div id="myDiv"></div>