Hot to plot datetime with on/off on y axis

I am using plotly.js to plot in a step-chart all the time my website urls were online/offline.
This my initial code:

var chart_data_1 = {
	x: [0,1,2,3,4,5],
	y: [0, 1, 1, 0, 1, 0, 0, 0],
	type: 'scatter',
	line: {"shape": 'hv'},
	mode: 'lines',
	name: 'value'

var chart_total_data = [chart_data_1];

var layout = {
	yaxis: {
		tickformat: ',d'
	xaxis: {
		tickformat: ',d'

Plotly.plot(gd,  {
    data: chart_total_data,
    layout: layout

and this is the output I have:

My question is: how can I plot datetime instead of static numbers on y axis with horizontal scrolling (since I have hundreds of records)?

Hi @HarryPlotter welcoem to the forums.

I’m not sure if I understand your question. Does this help?

I am using “Basic Time Series” and it seems to work.
So, how can I enable a bar to scroll horizontally?

I am trying to overlap 2 values as shown in the following image:

Is there a way to color intersection of the two values?

I’m not sure, try searching here:

Hello @AIMPED,
I tried to follow examples but the first example (Filled area plots in JavaScript) fills each value, even if two values are not both “1”.
I would like to obtain something like this attached (see manually green fill):

Besides, is there a way to enable an horizontal scrolling bar?



as workaround you could create an additional trace where you calculate the overlap manually.

Concerning the vertical scrollbar: are you referring to a range slider?

1 Like