Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

X axis tick values

I am using plotly js scatter plot. My data on x-axis is in the format of time [‘00:01’, ‘00:02’, ‘00:03’, ‘00:04’, ‘00:05’, ‘00:06’, ‘00:07’, ‘00:08’, ‘00:09’, ‘00:10’, ‘00:11’, ‘00:12’, ‘00:13’, ‘00:14’, ‘00:15’, ‘00:16’, ‘00:17’, ‘00:18’, ‘00:19’…‘23:59’]

currently my x-axis looks like below

But I want my x-axis to look like below:

I can achieve this result by using tickvals, but if I use that then after zooming it shows only 2 hour intervals only. I want it to dynamically change it to 1 hour or 30 mins or 15 mins interval when zoomed in accordingly.

Code for X axis:

xaxis: {
title: ‘Time’,
titlefont: {
family: ‘Arial, sans-serif’,
size: 18,
color: ‘#666666
},
ticks: ‘outside’,
tickcolor: ‘#666666’,
zeroline: true,
zerolinecolor: ‘#666666’,
zerolinewidth: 4,
linewidth: 6,
tickfont: {
family: ‘Old Standard TT, serif’,
size: 14,
color: ‘black’
},
},

How can I do that?

I’d recommend converting your x coordinates to date strings that plotly understands by adding a phoney year, month and day e.g. 2018-01-01 hh:mm and then setting the dtick value on your liking in milliseconds.