'Plotly sections with labels

I've been asked to implement with plotly.js the same functionalities we have with a java graph library.

The only think that i currently have no idea if it would be possible to do with plotly is a status series where you basically have to display on top of other line charts some string values that defines the status of the machine in some time intervals

example:

The following data : data: [{start:0, end:1, value: "cold"}, {start:1, end:1.5, value: "hot"}, {start:1.5, end:2, value: "warm"}, {start:2, value: "cold"}]

should produce a status series similar to the following image expected result

Requirements:

  1. The text must be inside the corresponding time series if there's enough space or in a hover:tool-tip otherwise
  2. The series should stay on the top part of the graph, independently of the y zoom level.

Do you think it would be possible to do it, and if so, could you explain which tools should i use in plotly to do something similar. Thanks



Solution 1:[1]

I think you can use shapes to achieve what you want, but in order for the shapes to not resize while you zoom in and out, you'll need to position them relative to the plot instead of relative to the axes, which will require you to convert your coordinates and normalize them between 0 and 1. I can add an example for you if that would help

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Derek O