WTH: "Random" colors on history-graph-card timeline

[nicohirsch]

The colors on the timeline graph of the history-graph-card are kind of random if you use it with “text-sensors” (all colors appear in the same order on every new state and is then used again if that state reappears). If you use multiple graphs to get an overview, you can’t:

(you can see here that e.g. purple is sometimes unlocked and sometimes locked - it’s impossible to see at a glance when which door was locked/unlocked)

Better would be at least fixed colors to states (e.g. calculate a hash of the string).
But better would be customizable colors to highlight good or bad states in the history. This also fits to binary_sensors where often e.g. an open door gets green color and closed door is red (but of course it should be the opposite).

[Cougar]

I think, this is related with Changing colors of the History-Graph topic

[nicohirsch]

It’s related, indeed. I thougt a longer time, if I should add it there or open a new topic, but the other topic is about colors of entities and this about colors of states (which I think is a very big difference).

[MrThiemann]

have you already found a solution to adjust the color of the timeline?

[nicohirsch]

Sadly not …there was a script from Thomas Lovén, but that doesn’t work since HA 2021.7.0.
At least the situation is a little bit better now:

• If you have multiple timelines, the first appearance of a state defines the color. If that state appears in another timeline, the color stays the same (in the screenshot above, all “unlocked” would be purple), but the color still can change on reload.
• You can define what the first, second, … color should be:

  graph-color-1: "#00ddff"
  graph-color-2: "#0000ff"
  graph-color-3: "#ffdd33"
  graph-color-4: "#ff00ff"
  

• You can define the color for some states:

  --state-on-color
  --state-off-color
  --state-home-color
  --state-not_home-color
  --state-unavailable-color
  --state-unknown-color
  --state-idle-color
  

(Source for the last two bullets: https://github.com/home-assistant/frontend/pull/10698)

But my biggest wish has unfortunately not yet been fulfilled: Set custom colors for all individual states.
In my example:
unlocked: red
locked: green
lock’n’go: orange

[MrThiemann]

Thanks for your answer!
I’ve also found a possibly very interesting way. But it is definitely still expandable.

I created a new sensor template.

- platform: template
  sensors:
      livingroom_temperature:
          friendly_name: "Living Room Temperature"
          unit_of_measurement: "°C"
          value_template: >-
              {{ state_attr('climate.fritz_dect_301_2_wohnzimmer','current_temperature')}}
              {% if state_attr('climate.fritz_dect_301_2_wohnzimmer','current_temperature') > 23 %}Warm
              {% elif state_attr('climate.fritz_dect_301_2_wohnzimmer','current_temperature') < 21 %}Cold
              {% else %}Pleasant{% endif %}

I hope you recognize that. I translated the code from German

I think that comes very close to your wish for unlocked, locked and lock’n’go

[nicohirsch]

I think that comes very close to your wish for unlocked, locked and lock’n’go

That’s a great custom card - thank you for the tip If I disable toolbar & selector it does what I need.
But I still hope that the native history graphs also get that function since we’re already very close to that.

I hope you recognize that. I translated the code from German

Klar, kein Problem