Scatter Line - annotation on multiple lines and axis

plotly.js
1

Hi,

how can I have annotations showing for every line and the axis? I can see charts with that featuer in the tutorial examples, see below

image
image.png712×452 30.9 KB

source: https://plot.ly/javascript/time-series/

However I don’t see any specific configuration in the Layout string for those examples. When I build my charts, I only have the annotation on the screen I am pointing at:

image
image.png819×489 19.1 KB

Here is the json I use:
LAYOUT:
{
“xaxis”:{
“tickmode”:“auto”,“nticks”:6,
“range”: [“2019-10-15 17:00:42”,“2019-10-15 17:45:42”],
“rangeslider”: {“range”: [“2019-10-15 17:00:42”,“2019-10-15 17:45:42”]}
},
“yaxis”:{“tickmode”:“auto”,“nticks”:5}
}

DATA:
[{“y”:[432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490],“x”:[“2019-10-15 16:59:19”,“2019-10-15 17:01:50”,“2019-10-15 17:03:15”,“2019-10-15 17:03:48”,“2019-10-15 17:04:42”,“2019-10-15 17:05:14”,“2019-10-15 17:06:16”,“2019-10-15 17:06:49”,“2019-10-15 17:07:21”,“2019-10-15 17:08:12”,“2019-10-15 17:08:44”,“2019-10-15 17:09:17”,“2019-10-15 17:09:50”,“2019-10-15 17:11:04”,“2019-10-15 17:11:36”,“2019-10-15 17:12:09”,“2019-10-15 17:12:42”,“2019-10-15 17:13:16”,“2019-10-15 17:13:55”,“2019-10-15 17:14:28”,“2019-10-15 17:15:26”,“2019-10-15 17:15:59”,“2019-10-15 17:16:32”,“2019-10-15 17:17:05”,“2019-10-15 17:17:37”,“2019-10-15 17:18:11”,“2019-10-15 17:19:37”,“2019-10-15 17:20:10”,“2019-10-15 17:20:42”,“2019-10-15 17:21:15”,“2019-10-15 17:22:21”,“2019-10-15 17:23:28”,“2019-10-15 17:24:01”,“2019-10-15 17:25:23”,“2019-10-15 17:25:55”,“2019-10-15 17:26:27”,“2019-10-15 17:27:00”,“2019-10-15 17:27:34”,“2019-10-15 17:28:07”,“2019-10-15 17:29:13”,“2019-10-15 17:29:46”,“2019-10-15 17:30:19”,“2019-10-15 17:30:52”,“2019-10-15 17:31:28”,“2019-10-15 17:32:00”,“2019-10-15 17:32:34”,“2019-10-15 17:33:06”,“2019-10-15 17:33:39”,“2019-10-15 17:34:12”,“2019-10-15 17:34:44”,“2019-10-15 17:36:12”,“2019-10-15 17:36:45”,“2019-10-15 17:38:48”,“2019-10-15 17:40:12”,“2019-10-15 17:41:18”,“2019-10-15 17:42:22”,“2019-10-15 17:43:27”,“2019-10-15 17:44:00”,“2019-10-15 17:44:35”],“mode”:“lines”,“type”:“scatter”,“name”:“Good”,“line”:{“color”:“green”,“width”:1}},{“y”:[45,46,47,48,49,50,51],“x”:[“2019-10-15 16:50:08”,“2019-10-15 17:00:43”,“2019-10-15 17:21:48”,“2019-10-15 17:35:17”,“2019-10-15 17:37:55”,“2019-10-15 17:40:45”,“2019-10-15 17:42:54”],“type”:“scatter”,“mode”:“lines”,“name”:“Scrap”,“line”:{“color”:“black”,“width”:1}}]

2

Setting layout.hovermode: 'x' should do the trick.

1 Like