How to add a spike line at new day/ midnight in a time series line graph

plotly.js
1

New to plotly - I don’t see any examples of setting a (static) spike line at a given point, like midnight. Has anyone done that before?

2

use shapes, example

	shapes: [{
		type: 'line',
		xref: 'x',
		yref: 'y',
		x0: moment().subtract(6000, intervals[interval].intervalLetter).valueOf(),
		x1: moment().add(2000, intervals[interval].intervalLetter).valueOf(),
		y0: 0,
		y1: 0,
		visible: false,
		line: {
			width: 0.8,
			dash: 'dot'
		}
	}]
3

Thanks! I will give it a go!

4

Pardon, Saratoga - could you flesh out what your data looks like - the intervals[interval].intervalLetter please?

5

One more thing - if the time series goes over multiple days, and we need spike at midnight for each day, can you pass an array of the midnights or do you have to create a shape for each day?

6

Intervals is an arrangement that I create

const intervals = {
	'1m': {
		'ms': 1000 * 60,
		'intervalNum': 1,
		'intervalLetter': 'm'
	},
	'3m': {
		'ms': 1000 * 60 * 3,
		'intervalNum': 3,
		'intervalLetter': 'm'	
	},
.
.
.
}

however to dynamically create the shapes you would have to first have a function that is running periodically perhaps with a setTimeout and within that function include a condition that checks the time perhaps with
new Date (). getHour () == 24
or
new Date (). getHour () == 0

and already in that condition put something like this

	var newAnnotation = {
		x: oTime[0],
		y: y,
		xref: 'x',
		yref: 'y',
		yanchor: yanchor,
		ax: 0,
		ay: ay,
		bgcolor: color,
		borderpad: 3,
		arrowcolor: color,
		font: {
			size:8,
			color: 'black'
		},
		text: textLabel
	},
	newIndex = (myPlot.layout.annotations || []).length;

	Plotly.relayout(myPlot, 'annotations[' + newIndex + ']', newAnnotation)

This code creates annotations dynamically in your case they should be ‘shapes’ just adapt this code to the ‘shapes’

good luck