A way to Change a Utility Meter's History Colors?

Configuration Frontend
1

I have created a Utility Meter that uses 3 different tariffs, when I change the select of the utility meter it makes this cool history graph that almost looks like my TOU chart from my hydro company. Not a huge issue but I was curious is it possible to change these colors to actually match my TOU colors?

image
image894×930 146 KB

2 
    type: history-graph
    entities:
      - entity: ...
    hours_to_show: ...
    card_mod:
      style: |
        ha-card {
          --graph-color-1: red;
          --graph-color-2: orange;
          --graph-color-3: yellow;
          --graph-color-4: green;
          --graph-color-5: lightblue;
          --graph-color-6: blue;
          --graph-color-7: violet;
        }

But it will not be persistent:
if the 1st value on a graph is “on-peak” - it will be read, otherwise - any)))
I.e. these colors depend on an order of occurrence in a timeline.
Only for some domains & device_classes persistent colors may be defined.

3

Ahh okay so this probably wont work. Its okay I was hoping to make it match!!

4

Or use a custom history-explorer card (very customizable):
image

type: vertical-stack
title: state colors
cards:
  - type: entities
    entities:
      - entity: input_select.testing_value
  - type: custom:history-explorer-card
    defaultTimeRange: 5m
    stateColors:
      input_select.testing_value.one: red
      input_select.testing_value.two: orange
      input_select.testing_value.three: yellow
      input_select.testing_value.four: green
      input_select.testing_value.five: lightblue
      input_select.testing_value.six: blue
      input_select.testing_value.seven: violet
    graphs:
      - type: timeline
        entities:
          - entity: input_select.testing_value

Ofc it is about a particular card, not a History page.

5

No this is great, thank you!!