Dynamically change the graph parametres

Setup, Configuration and Use Beginners
1

I have few graphs of temperature on one page + for each of the room a corresponding set temperature on a heater. It’s already quite a few information on that page, and I prefer to have a clear design.

image
image1298×745 53.1 KB

However on op of it, I would also want to present an information when heater was on/off. IMO the best way to present it, would be to change a colour of the line, which represent a room temperature.

    - component: oh-time-series
      config:
        gridIndex: 0
        item: TempSensor4_CurrentTemp
        name: Room 4
        type: line
        color: '=(items.Heater4_Relay.state === "OFF") ? "rgb( 81, 118, 100)" : "red"' 
        xAxisIndex: 0
        yAxisIndex: 0

The colour ‘changes’ but only on the latest status of the heater, so it doesn’t take it as a time series.

Is there a way to change a colour dynamically, either for a line or a bar or add some additional info about a different item status?

… so it would look something like that - a clear indicator on a temperature graph, where the heater was on

image
image1298×745 61.9 KB

2

I found our that theoretically it’s possible with Apache ECharts. I will try to configure it (unless someone has done it already) Examples - Apache ECharts

3

After some reading and few hours of trying I found out that it’s possible to change to color of line based on the value, however the data set has to be the same. ECharts doesn’t support a functionality which I wanted - to change a visional of A based on data set from B.