Losing time from the time axis after using dtick: '1' , autotick: false

plotly.js
1

Hi,

I am not able to understand why I am losing time from the time axis after using “dtick”. Time appears on the zooming.

Before:

image.png845×411 13.8 KB

After zooming:

image.png1122×394 14.5 KB

Can you please explain? I am using like this:
var layout = {title: ‘Timeline of WLAN Protocol events’, width: 1540 , height: 540 , xaxis: {showgrid: true,showline: true,linecolor: ‘rgb(102, 102, 102)’,titlefont: {font: {color: ‘rgb(204, 204, 204)’}},autotick: false ,dtick: ‘1’,title:‘Time of the event’,},yaxis: {showgrid : true,showline : true,fixedrange: true,linecolor: ‘rgb(102, 102, 102)’,titlefont: {font: {color: ‘rgb(204, 204, 204)’}},tickfont: {font: {color: ‘rgb(102, 102, 102)’}},title: ‘WLAN Protocol Event Type’, },margin: {l: 140,r: 40,b: 100,t: 50},hovermode: ‘closest’};Plotly.newPlot(myPlot, data, layout,{dragmode:‘pan’});

Thanks
Harprit

2

Can you share your data too, making your example fully reproducible?

Trying to replicate your case without it is very time consuming and a little outside the scope of this (free) forum.

3

Hi,

I have reproduced the same example. Please find the link below.

Thanks
Harprit

1 Like
4

Oh I see. You’re setting dtick to 1. On date axis, that means 1 milliseconds, which is why all your tick labels are stacked on top of each other.

Here’s your graph, with x-axis ticks at every 10 seconds: https://codepen.io/etpinard/pen/RgXjZR?editors=0010

More info: https://plot.ly/javascript/reference/#layout-xaxis-dtick

1 Like
5

Hi,

But with different trace, again it is getting stacked up. Do I have to change for each different time.
Can it automatically resize?

Thanks
Harprit

6

Just unset xaxis.ditck if that’s the behavior you’re looking for.

dtick is meant to fine-tune tick label placement, it won’t get it right for all graphs.

7

Sure, Thank you so much.

I wanted is when I zoom, it can show milliseconds tuning, otherwise normal tuning without dtick.

Thanks
Harprit

1 Like