Hi there!
Sure, it’s not a secret or something 
I actually already did in Button card thread here. You will find latest pic and config for all the components.
Anyone knows if I am able to do some math functions (/1000) for one of the entities in the graph?
Have you tried this:
Try using “value_factor” option.
I am trying to set color thresholds but not seeing any result. I ahve three pen traces on the trend and want only one of them to be blue if positive and red if negative.
type: custom:mini-graph-card
entities:
- entity: sensor.meter_power_a
- entity: sensor.meter_power_b
- entity: sensor.meter_power_c
color_thresholds:
- color: blue
value: 100
- color: red
value: -100
name: Solar Power
hours_to_show: 24
points_per_hour: 4
Change the lines / attributes cause this one works
color_thresholds:
- value: 100
color: blue
- value: -100
color: red
at least here - used for weight / scale with different threshold values of cause.
Wrong indentation. This is a property of the card, not for some entity.
1 Like
hey friends of ha.
I actually want to make a graph like in the picture.
That if I have power left over from the solar panels, the beam goes up, and I consume more power than I generate, the beam goes down and turns red…
Who already made this? And can share the code with me?
1 Like
Hello,
I am trying to change the color of the temperature value based on some predefined values but I am not very good with css and consequently it does not work.
This is the code:
- type: custom:mini-graph-card
style: |
ha-card .states.flex .state .state__value.ellipsis{
{% if is_state_attr('sensor.ble_moisture_xxxxx', 'median', >=21)}
color: orange;
{% elif is_state_attr('sensor.ble_moisture_xxxxx', 'median', <=20)}
color: red;
{% endif %}
color: green;
}
entities:
- entity: sensor.ble_moisture_xxxxxxx
The color is always white as you can see from the image below:
I took a cue with this portion of code I found on this post:
style: |
ha-card .states.flex .state .state__value.ellipsis{
color: orange;
}
Thank you for you help!
I can only see a 20% figure and no temperature °C
From my experience you will be able to change the white 20 but not the colour of the unit % which is a tinted white. You can choose orange and the 20 will be orange and the % will be in a different kind of orange.
But I guess you want to let the 20 figure display or represent the sensors value / color.
@typxxi You are right, my mistake. The sensor is like a water sensor of a plant and I have also a temp sensor.
Anyway what I would like to do is to change the colour of 20 with the values above. So if the sensor value is >=21 the colour will be organge or if the sensor value is <=20 the sensor value will be red.
I do not care about the kind of colour of “%” or “C°”.
Thanks.
I had used this to change color and size of the particular figure
style: |
ha-card .states.flex {
color: white;
font-size: 22px;
}
and it worked out for me.
I guess you got the wrong object. So you might try this one out first with orange instead of my white and see if that works. If it does work then change color depending on your measurement results. I am not an expert but had played around with this particular topic recently and all the things possible and tricks Ildar_Gabdullin had shown here before.
Should be:
{% if state_attr('sensor.ble_moisture_xxxxx', 'median') | int >= 21 %}
Regarding the styling itself - did not check it by myself, use this tutorial.
Look at this, there are 2 options:
- Setting a color for the state also affects on a color for it’s unit (same color but a bit pale).
- Setting different colors for the state’s value & unit.
yes, we had this topic last week and it was about that pale issus cause figure and unit will always look different colorwise. You can not get them matched, you will get white and kind of grey, red and a different red. That’s why I mentioned it cause I had played around with that last week when you had shown me the examples. Just a bit weird that you can not get the exact same colour for the unit that you had chosen for the figure.
No, you can:
type: custom:mini-graph-card
entities:
- sensor.cleargrass_1_temp
show:
labels: true
average: true
extrema: true
style: |
ha-card .states.flex .state .state__value.ellipsis {
color: magenta;
}
ha-card .states.flex .state .state__uom.ellipsis {
color: magenta;
opacity: 1;
}
1 Like
@typxxi The object is right because I tried before with this and it works:
style: |
ha-card .states.flex .state .state__value.ellipsis{
color: orange;
}
Now I just try with the following code, thanks @Ildar_Gabdullin, the 20 change colour but it does not change in orange as it should be based on the values of the sensor.
It displays the value 20 always in green.
style: |
ha-card .states.flex .state .state__value.ellipsis{
{% if state_attr('sensor.ble_moisture_xxxxx', 'median') | int >= 21 %}
color: orange;
{% elif state_attr('sensor.ble_moisture_xxxxxx', 'median') | int <= 20 %}
color: red;
{% endif %}
color: green;
What am I doing wrong ? Something with if or elif ?
In your code the final value is always green.
Change it into smth like this as per your intentions:
{% if state_attr('sensor.ble_moisture_xxxxx', 'median') | int >= 21 %}
color: orange;
{% elif state_attr('sensor.ble_moisture_xxxxxx', 'median') | int <= 20 %}
color: red;
{% else %}
color: green;
{% endif %}
i.e. it is green for values like 20.1, 20.2, … 20.99
1 Like