Look at this (card-mod):
type: 'custom:mini-graph-card'
style:
.icon ha-icon:
$: |
ha-svg-icon {
color: red !important;
}
entities:
...
But here I can select ONE colour - ‘red’.
To set a colour dependingly on some entity’s value I think you must use something like “config-template-card” only …
Or you can ask the author of ‘mini-graph-card’ to add a feature “change colour accordingly to threashold”…
Card-mod supports templates. It’s right there in the docs with an example.
My mistake, you’re right!
type: 'custom:mini-graph-card'
style:
.icon ha-icon:
$: |
ha-svg-icon {
{% if states('sensor.calc_co2_diff_cg1_cg2')|float >= 30%}
color: red !important;
{% elif states('sensor.calc_co2_diff_cg1_cg2')|float >= 25%}
color: cyan !important;
{% elif states('sensor.calc_co2_diff_cg1_cg2')|float >= 23%}
color: magenta !important;
{% else %}
color: green !important;
{% endif %}
}
entities:
- entity: sensor.calc_co2_diff_cg1_cg2
name: ''
unit: ''
show_state: true
show_indicator: false
show_graph: true
show_line: true
show_fill: true
show_points: false
show_legend: false
state_adaptive_color: false
fixed_value: false
...
color_thresholds:
- value: 0
color: green
- value: 23
color: magenta
- value: 25
color: cyan
- value: 30
color: red
color_thresholds_transition: hard
Thanks!!!
type: 'custom:mini-graph-card'
style:
.icon ha-icon:
$: |
ha-svg-icon {
{% if states('sensor.xxx_remaining_range_total')|float <= 120%}
color: orange !important;
{% elif states('sensor.xxx_remaining_range_total')|float <= 80%}
color: red !important;
{% else %}
color: white !important;
{% endif %}
}
entities:
- entity: sensor.xxx_remaining_range_total
show:
legend: false
color_thresholds:
- value: 140
color: '#3498DB'
- value: 40
color: red
name: xxx
line_width: 6
font_size: 75
animate: true
lower_bound: 0
upper_bound: 850
hours_to_show: 360
points_per_hour: 0.1
icon: 'mdi:gas-station'
This is one of my favourite cards, however I seem to have an issue with the ‘delta’ function. If the diference between two days in my consumption calculation is next to zero, (1684.14 kWh > 1684.15 kWh) bar and value for this day are1684.15 kWh instead of 0.01 kWh. Also if the value for both days is identical, delta should be 0, no?
upper_bound: 40 - this is why you don’t see the full height of the bar.
Would be very greatful someone could help…
Problem solved, I don’t know how though. I only changed the aggregate function to sum and then back to delta. Now it shows 0 in case there is no consumption…
Anyone else facing issues with graph color when actual value is very close to top or bottom of color range? Please see these 2 screenshots below. The upper line (black) represents inside temperature (|BTW you can see the very same error on the lower line, but with values being above, but very close to lower limit; line should become green instead of black):
The color thresholds are defines as follow:
color_thresholds:
- value: 25
color: var(--alert-text)
- value: 10
color: var(--yellowish)
- value: 0
color: var(--greenish)
- value: -10
color: var(--cyanish)
Now, it is enough to change slightly the highest color threshold (from 25 to 24 degrees) to receive what it should be:
Obviously this is not permanent solution, since if temperature changes to one closer to threshold issue reappears.
Is there any permanent fix to this? Is it a bug?
I am using card to show daily energy consumption in last 15 days. It does show MIN & MAX values. But is it also possible to show average value?
Actually you are not displaying max & min values on the screen.
Look at this:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
average: true
extrema: true
color_thresholds:
- value: 19.5
color: '#00ff00'
- value: 20
color: '#ff0000'
- value: 20.5
color: '#0000ff'
Do not bother about color_threashold - it is left from my test card.
@Ildar_Gabdullin, I think what @AbDhops is asking is how to display an average line on the graph, or to show the average between the two extrema values on the left (which happen to be the min and max). I’m assuming the latter but perhaps the defaults that you’ve shown would suffice too.
@AbDhops if you want to draw an average line then you can search the forums – there are a few examples. Basically, you’ll need to create a sensor that you set to the average using an automation (or you could use the stats integration).
Do you mean this?
Is it possible to graph line and bars on the same graph?
According to this:
Actually I prefer not to use a bar graph.
As I understood, a value for each DISPLAYED point is calculated dependingly on:
My proposal - use a line power consumption graph + line average graph.
can anyone help me explain this in simple english / dutch. I also have solar panels, and would like to see my weekly consumption in + & -. so green if my net consumption is lower than 0, and red if it is above 0.
Styling the card with “card-mod”:
Changing background color:
Note: this style may be used to make a card transparent.
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
card_mod:
style: |
ha-card {
--ha-card-background: rgba(50,50,50,0.2);
}
Background image:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
card_mod:
style: |
ha-card {
background-image: url("/local/images/blue_low_2.jpg");
background-size: 100% 100%;
}
All text is colored:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
average: true
extrema: true
card_mod:
style: |
ha-card {
color: red;
}
Colored title & icon:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
average: true
extrema: true
card_mod:
style: |
.header.flex .name.flex {
color: green;
}
.header.flex .icon {
color: red;
}
Resized icon:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_co2
show:
labels: true
average: true
extrema: true
card_mod:
style: |
.header.flex .icon {
--mdc-icon-size: 60px;
}
Colored state & min/max/avg info:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
average: true
extrema: true
card_mod:
style: |
.states.flex {
color: orange;
}
.info.flex {
color: red;
}
Colored state value, colored unit:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
average: true
extrema: true
card_mod:
style: |
.states.flex .state .state__value.ellipsis{
color: orange;
}
.states.flex .state .state__uom.ellipsis{
color: cyan;
}
Colored info: different colors:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
average: true
extrema: true
card_mod:
style: |
.info.flex .info__item .info__item__type {
color: red;
}
.info.flex .info__item .info__item__value {
color: green;
}
.info.flex .info__item .info__item__time {
color: cyan;
}
Colored info: only max:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
average: true
extrema: true
card_mod:
style: |
.info.flex div.info__item:nth-child(3) {
color: red;
}
Colored info: only max, different colors:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
average: true
extrema: true
card_mod:
style: |
.info.flex div.info__item:nth-child(3) .info__item__type {
color: red;
}
.info.flex div.info__item:nth-child(3) .info__item__value {
color: green;
}
.info.flex div.info__item:nth-child(3) .info__item__time {
color: cyan;
}
Colored labels:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
average: true
extrema: true
card_mod:
style: |
.graph .graph__container .graph__labels {
color: red;
}
Colored labels (different colors):
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
average: true
extrema: true
card_mod:
style: |
.graph .graph__container .graph__labels .label--max {
color: green;
}
.graph .graph__container .graph__labels .label--min {
color: red;
}
How to style if secondary Y-axis is present:
Let’s add one more graph and set a style to labels:
type: 'custom:mini-graph-card'
entities:
- entity: sensor.cleargrass_1_temp
name: Temp
show_state: true
- entity: sensor.cleargrass_2_co2
name: CO2
show_state: true
y_axis: secondary
show:
labels: true
name: false
icon: false
average: false
extrema: false
labels_secondary: true
card_mod:
style: |
.graph .graph__container .graph__labels {
color: red;
}
Also we can style a color for the legend:
type: 'custom:mini-graph-card'
entities:
- entity: sensor.cleargrass_1_temp
name: Temp
show_state: true
- entity: sensor.cleargrass_2_co2
name: CO2
show_state: true
y_axis: secondary
show:
labels: true
name: false
icon: false
average: false
extrema: false
labels_secondary: true
card_mod:
style: |
.graph .graph__legend {
color: red;
}
Now let’s tune up colors for Y-axis & legend for every graph:
type: 'custom:mini-graph-card'
entities:
- entity: sensor.cleargrass_1_temp
name: Temp
show_state: true
color: red
state_adaptive_color: true
- entity: sensor.cleargrass_2_co2
name: CO2
show_state: true
color: green
state_adaptive_color: true
y_axis: secondary
show:
labels: true
name: false
icon: false
average: false
extrema: false
labels_secondary: true
card_mod:
style: |
.graph .graph__container .graph__labels.--primary.flex {
color: red;
}
.graph .graph__container .graph__labels.--secondary.flex {
color: green;
}
.graph .graph__legend div:nth-child(1) {
color: red;
}
.graph .graph__legend div:nth-child(2) {
color: green;
}
Changing font-size:
For each element:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
average: true
extrema: true
card_mod:
style: |
.header.flex .name.flex {
font-size: 10px;
}
.states.flex .state .state__value.ellipsis {
font-size: 15px;
align-self: center;
}
.states.flex .state .state__uom.ellipsis {
font-size: 18px;
align-self: center;
}
.info.flex .info__item .info__item__type {
font-size: 12px;
}
.info.flex .info__item .info__item__value {
font-size: 18px;
}
.info.flex .info__item .info__item__time {
font-size: 8px;
}
.graph .graph__container .graph__labels {
font-size: 18px;
}
For legend:
type: 'custom:mini-graph-card'
entities:
- entity: sensor.cleargrass_1_temp
name: Temp
show_state: true
- entity: sensor.cleargrass_2_co2
name: CO2
show_state: true
y_axis: secondary
show:
labels: true
name: false
icon: false
average: false
extrema: false
labels_secondary: true
card_mod:
style: |
.graph .graph__legend {
font-size: 8px;
}
Hiding dates for MAX & MIN data:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
extrema: true
card_mod:
style: |
.info.flex .info__item .info__item__time {
display: none;
}
Hiding MAX or MIN data:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
extrema: true
card_mod:
style: |
.info.flex div.info__item:nth-child(1) {
color: transparent;
}
.info.flex div.info__item:nth-child(2) {
color: red;
}
Another example - how to show “avg” & “max” labels:
type: custom:mini-graph-card
entities:
- sensor.xiaomi_cg_1_temperature
show:
labels: true
average: true
extrema: true
style: |
.info.flex div.info__item:nth-child(1) {
display: none;
}
.info.flex div.info__item:nth-child(2) {
text-align: left;
}
Hiding a unit for special cases:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
card_mod:
style: |
.states.flex .state .state__uom.ellipsis {
{% if states('sensor.cleargrass_1_temp') in ['unavailable','unknown'] %}
display: none;
{% endif %}
}
state_map:
- value: unavailable
label: Sensor off
- value: unknown
label: Sensor off
Animation - blinking name, resized & rotating icon:
post
Display an additional info on the card:
post
Display additional text items (prefixes & suffixes):
post
Playing with animated curve:
post
One style for all graphs in a stack:
post
Solid fill:
All credits to @menloperk !
post
Update 15.08.22: does not seem to work in Safari & iOS Companion App.
Place state values in one line:
post
Show a graph for the 2nd sensor on the bottom:
post
Set a color for the last bar:
post
Place 2 sensors’ states on the left side:
post
Display states as a part of the legend:
post
Display a unit under the state:
post
Display a state & extrema data on the same line:
post
All credits to @reste_narquois !
Fixing an issue with a card inside state-switch:
post
Placing a UoM before a state’s value:
post
Imitating statistics card:
post
How to nicely align legend’s elements:
post
Styling labels’ background:
post
How to change graph’s color dynamically:
post
I’m busy with integration my energy consumption and costs. Is there any way to combine the red and blue bars? Or to hide the blue bar, but only show the value when hovering over one of the red bars?
Is there a way to group by something less than 1 hour?
I am tracking energy costs, i have 30 minute updates on the tariff but the graph can only group by 1 hour intervals which makes it slightly incorrect.
