Strange that this was not posted yet…
How to customize colors for graphs:
There is an undocumented (i.e. could become unsupported) method.
Compare these cards:
Use “–graph-color-xxxx” vars to customize colors.
Note that the 2nd & 3rd cards have no filled bullets in a legend. Imho a format of defining a color matters - so use hex colors.
code
type: vertical-stack
cards:
- type: history-graph
entities: &ref_entities
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_2_co2
- entity: sensor.mijia_300_1_co2
card_mod:
style: |
ha-card {
--graph-color-1: #ff0000;
--graph-color-2: #0000ff;
--graph-color-3: #00ff00;
}
- type: history-graph
entities: *ref_entities
card_mod:
style: |
ha-card {
--graph-color-1: rgb(255,0,0);
--graph-color-2: rgb(0,0,255);
--graph-color-3: rgb(0,255,0);
}
- type: history-graph
entities: *ref_entities
card_mod:
style: |
ha-card {
--graph-color-1: red;
--graph-color-2: blue;
--graph-color-3: green;
}
P.S. a small remark: sometimes I think that conventional “history-graph” card is in some ways much better than shiny custom cards - they are “streaming” & show unavailable states properly.
This method may be also used for statistics graph card:
Here only hex format is advised, otherwise I observed this:
Update: this was changed in 2025.2, now colors are shown properly.
Tested in Chrome & FF (Win), iOS companion app (iOS 15.x)