Styling History Graph card:
Warning: at least in 2023.7 styling the card is very UNSTABLE.
Colored title:
![ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅](https://community-assets.home-assistant.io/original/3X/0/e/0ee606ed264e4a91fdddc9fe9fe22e5afd79c86a.png)
Code
type: history-graph
entities:
- entity: sun.sun
name: Sun
- entity: binary_sensor.net_is_available_internet
name: Internet
hours_to_show: 8
refresh_interval: 0
title: Colored title
card_mod:
style: |
ha-card {
color: red;
}
More formats for a title:
![ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅](https://community-assets.home-assistant.io/original/3X/6/6/66d7c76712e477fa9daadc7bf1b2014e37e1d553.png)
Code
type: history-graph
entities:
- entity: sun.sun
name: Sun
- entity: binary_sensor.net_is_available_internet
name: Internet
hours_to_show: 8
refresh_interval: 0
title: >-
The quick brown fox jumps over the lazy dog The quick brown fox jumps over the
lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps
over the lazy dog
card_mod:
style: |
.card-header {
color: red;
font-size: 10px;
line-height: 1.2;
}
Colored legend:
Code
type: history-graph
entities:
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_2_co2
- entity: sensor.xiaomi_cg_1_temperature
hours_to_show: 8
refresh_interval: 0
title: Colored legend
card_mod:
style:
.content state-history-charts $:
div:
state-history-chart-line $ ha-chart-base $: |
.chartLegend li {
color: red !important;
}
Update 21.09.22: the code above does not work in MacOS & iOS 15.x, use this code (works in Win, iOS 15.x, MacOS):
Code
card_mod:
style:
state-history-charts $ .entry-container:nth-child(n):
state-history-chart-line $ ha-chart-base $: |
.chartLegend li {
color: red !important;
}
Colored legend (different colors):
Code
type: history-graph
entities:
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_2_co2
- entity: sensor.xiaomi_cg_1_temperature
hours_to_show: 8
refresh_interval: 0
title: Colored legend (different colors)
card_mod:
style:
.content state-history-charts $:
div:nth-child(1):
state-history-chart-line $ ha-chart-base $: |
.chartLegend li {
color: red !important;
}
div:nth-child(2):
state-history-chart-line $ ha-chart-base $: |
.chartLegend li {
color: orange !important;
}
Update 21.09.22: the code above does not work in MacOS & iOS 15.x, use this code (works in Win, iOS 15.x, MacOS):
Code
card_mod:
style:
state-history-charts $ .entry-container:nth-child(1):
state-history-chart-line $ ha-chart-base $: |
.chartLegend li {
color: red !important;
}
state-history-charts $ .entry-container:nth-child(2):
state-history-chart-line $ ha-chart-base $: |
.chartLegend li {
color: orange !important;
}
Colored legend (different colors for different sensors):
Code
type: history-graph
entities:
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_2_co2
- entity: sensor.xiaomi_cg_1_temperature
hours_to_show: 8
refresh_interval: 0
title: Colored legend (different colors)
card_mod:
style:
.content state-history-charts $:
div:nth-child(1):
state-history-chart-line $ ha-chart-base $: |
.chartLegend li:nth-child(1) {
color: red !important;
}
.chartLegend li:nth-child(2) {
color: cyan !important;
}
div:nth-child(2):
state-history-chart-line $ ha-chart-base $: |
.chartLegend li {
color: magenta !important;
}
Update 21.09.22: the code above does not work in MacOS & iOS 15.x, use this code (works in Win, iOS 15.x, MacOS):
Code
card_mod:
style:
state-history-charts $ div:nth-child(1):
state-history-chart-line $ ha-chart-base $: |
.chartLegend li:nth-child(1) {
color: red !important;
}
.chartLegend li:nth-child(2) {
color: cyan !important;
}
state-history-charts $ div:nth-child(2):
state-history-chart-line $ ha-chart-base $: |
.chartLegend li {
color: magenta !important;
}
Colored header: unit & legend (different colors):
Note: does not work since HA 2021.7.
Obsolete code
type: history-graph
entities:
- entity: sensor.cleargrass_1_co2
- entity: sensor.cleargrass_2_co2
- entity: sensor.cleargrass_1_temp
hours_to_show: 8
refresh_interval: 0
title: Colored header (different colors)
style:
.content state-history-charts:
$:
'state-history-chart-line:nth-child(1)':
$:
ha-chart-base:
$: |
.chartHeader .chartTitle {
color: red;
}
.chartHeader .chartLegend {
color: cyan;
}
'state-history-chart-line:nth-child(2)':
$:
ha-chart-base:
$: |
.chartHeader {
color: orange;
}
.chartHeader .chartLegend {
color: magenta;
}
Hiding legend:
Code
type: history-graph
entities:
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_2_co2
- entity: sensor.xiaomi_cg_1_temperature
hours_to_show: 8
refresh_interval: 0
title: Hidden legend
card_mod:
style:
.content state-history-charts $:
div:
state-history-chart-line $ ha-chart-base $: |
.chartLegend {
display: none;
}
Update 21.09.22: the code above does not work in MacOS & iOS 15.x, use this code (works in Win, iOS 15.x, MacOS):
Code
card_mod:
style:
state-history-charts $ div:nth-child(n):
state-history-chart-line $ ha-chart-base $: |
.chartLegend {
display: none;
}
Tooltip: colored text:
Note: does not work since HA 2021.7.
![ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅](https://community-assets.home-assistant.io/original/3X/1/b/1b85e6896b0dab7c84ef9ef331ef0395b52bfbd6.png)
Obsolete code
type: history-graph
entities:
- entity: sensor.cleargrass_1_co2
- entity: sensor.cleargrass_2_co2
- entity: sensor.cleargrass_1_temp
hours_to_show: 8
refresh_interval: 0
title: Tooltip (text)
style:
.content state-history-charts:
$:
state-history-chart-line:
$:
ha-chart-base:
$:
'#chartTarget div': |
.chartTooltip {
color: orange;
font-size: 10px;
}
.chartTooltip .title {
color: red;
font-size: 20px;
}
![ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅](https://community-assets.home-assistant.io/original/3X/6/8/68328ed67a7a8a4def03d0431516b74eca0b8de0.png)
Obsolete code
type: history-graph
entities:
- entity: sun.sun
name: Sun
- entity: binary_sensor.net_is_available_internet
name: Internet
hours_to_show: 8
refresh_interval: 0
title: Tooltip (text)
style:
.content state-history-charts:
$:
state-history-chart-timeline:
$:
ha-chart-base:
$:
'#chartTarget div': |
.chartTooltip {
color: orange;
font-size: 10px;
}
.chartTooltip .title {
color: red;
font-size: 20px;
}
.chartTooltip .beforeBody {
color: cyan;
font-size: 15px;
}
Tooltip: changed background:
Note: does not work since HA 2021.7.
![ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅](https://community-assets.home-assistant.io/original/3X/2/5/250a3004d8378506d4dc2abdebed5d8cd8dec0a9.png)
Obsolete code
type: history-graph
entities:
- entity: sensor.cleargrass_1_co2
- entity: sensor.cleargrass_2_co2
- entity: sensor.cleargrass_1_temp
hours_to_show: 8
refresh_interval: 0
title: Tooltip (text)
style:
.content state-history-charts:
$:
state-history-chart-line:
$:
ha-chart-base:
$:
'#chartTarget div': |
.chartTooltip {
background-color: rgba(0,0,255,0.7);
}
![ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅](https://community-assets.home-assistant.io/original/3X/a/c/ac5bd6d02eb104c8f8cb2b915673768a9ba7fbc7.png)
Obsolete code
type: history-graph
entities:
- entity: sun.sun
name: Sun
- entity: binary_sensor.net_is_available_internet
name: Internet
hours_to_show: 8
refresh_interval: 0
title: Tooltip (background)
style:
.content state-history-charts:
$:
state-history-chart-timeline:
$:
ha-chart-base:
$:
'#chartTarget div': |
.chartTooltip {
background-color: rgba(0,0,255,0.7);
}
Colored scale:
Code
type: vertical-stack
cards:
- type: history-graph
entities:
- entity: sun.sun
name: Sun
- entity: binary_sensor.net_is_available_internet
name: Internet
hours_to_show: 8
refresh_interval: 0
title: Colored scale
card_mod:
style: |
.content {
--secondary-text-color: red !important;
--divider-color: cyan !important;
}
- type: history-graph
entities:
- entity: sensor.xiaomi_cg_1_co2
name: CO2
hours_to_show: 8
refresh_interval: 0
title: Colored scale
card_mod:
style: |
.content {
--secondary-text-color: red !important;
--divider-color: cyan !important;
}
More examples are described here.