Sorry, should have done this in my first reply. Here’s what works for me:
- type: custom:mini-graph-csrd
card_mod:
style: |
ha-card {
overflow: visible !important;
z-index: 2;
}
No worries, I’m only about 4 days into Home Assistant and have very little coding skills, so the newb hasn’t even started to wear off yet. 
I put that code in the card, but nothing happened. Card-Mod is installed via HACS but don’t know if there is additional config I need to do to get it to work.
That depends - if you are running your Dashboards in storage mode, then no. In YAML mode you have to explicitly list it as a custom resource in the lovelace section of your configuration.yaml.
But it is also always worth clearing browser cache. Or setting a higher z-index value?
Otherwise, you could check your browser’s developer tools to confirm that card-mod is being loaded - in Firefox/Chrome you access that by pressing F12.
Beyond that, we’re in YMMV territory I’m afraid.
Edit: though looking at your screenshot, isn’t it actually working? The min max bubbles are now overflowing the card border. Or did I misunderstood what you were trying to achieve?
Edit2: in fact, so is it the graph line. Probably not what you want. Perhaps not a solution for you after all. I think in my use, I wrap the card in a stack within another card with its own border, so maybe that’s why I don’t see that.
1 Like
I appreciate you taking the time on this. I honestly don’t know how to switch between storage mode and YAML mode. It’s set to whatever is the default. The issue is that I don’t want the bubbles to overflow. I want to see them properly. I need to make adjust the card height so that I can see all of it. My cards are in a dashboard that is set to grid view so that I wouldn’t have to stack them within other cards. It just gives you more precise placement. (at least for someone who doesn’t really know YAML.
I think it’s basically a feature of the card that the bubbles appear visually in line with the min and max levels - for low or zero levels as in your case, this means the min is at the very bottom of the card, and the bubble gets cut off sometimes.
I’ve not explored if there are ways to make the bubbles appear elsewhere - overall, this cutting off is probably a bug actually, but the card is not really being maintained now, so unlikely to get fixed.
EDIT: think I’ve found it (UNTESTED):
- type: custom:mini-graph-card
card_mod:
style: |
div.graph__labels {
bottom: 18px; #<-- this moves the box containing the bubbles upwards. Adjust accordingly using px, or rem or whatever. Use !important if it doesn't work the first time.
}
This may have other side effects of course, as I’ve not actualy tried it.
Thank you. I don’t think Card-Mod is working on my set up. I will look into it more tomorrow as it’s after 2am.
Put some efforts for reading what a “padding” is.
Otherwise - use other proposed advices which (with my due respect) are about applying properties not intended for achieving the expected result.
HA needs learning.
1 Like
can I change the color of text and icon ?
search by “card-mod” keyword
Trying to ask again after struggling a bit more:
After some code modifications I think I have my sensors defined in a way that capture rain per day and not last 24h, that suits me better. If I look into history for the sensors, values makes sense.
But, I can’t get the mini-graph-card to present it in a correct way…
The platforms and template sensors now looks like this:
# Regnsensor platform sensor rain_per_day
- platform: history_stats
name: "Regn Contact Per Day Flips/Dry"
entity_id: binary_sensor.regn_contact
state: "off"
type: count
start: '{{ now ().replace(hour=0, minute=0, second=0) }}'
end: '{{ now() }}'
- platform: history_stats
name: "Regn Contact Per Day Flips/Wet"
entity_id: binary_sensor.regn_contact
state: "on"
type: count
start: '{{ now ().replace(hour=0, minute=0, second=0) }}'
end: '{{ now() }}'
#unavailable
- platform: history_stats
name: "Regn Contact Per Day Flips/unavailable"
entity_id: binary_sensor.regn_contact
state: "unavailable"
type: count
start: '{{ now ().replace(hour=0, minute=0, second=0) }}'
end: '{{ now() }}'
#Template Regnsensor rain per day
- sensor:
- name: Rainfall [per day]
state_class: measurement
unique_id: rainfall_per_day
unit_of_measurement: mm
icon: mdi:weather-pouring
state: >-
{% set count = (states('sensor.regn_contact_per_day_flips_dry') | int(0)) + (states('sensor.regn_contact_per_day_flips_wet') | int(0)) - (states('sensor.regn_contact_per_day_flips_unavailable') | int(0)) -1 %}
{% if count < 0 %}
{% set count = 0 %}
{% endif %}
{% set mm = count * 0.52615 %}
{% if count >= 0 %}
{{ mm|round(1, 'floor') }}
{% endif %}
If I look at my daily graph, presented by the mini graph card:
type: custom:mini-graph-card
icon: mdi:weather-rainy
name: Regn per day
aggregate_func: max
hours_to_show: 360
group_by: date
show:
graph: bar
fill: true
icon: false
color_thresholds:
- value: 100
color: '#8a111e'
- value: 50
color: '#c7311c'
- value: 25
color: '#fc5a43'
- value: 10
color: '#fc8582'
- value: 5
color: '#fbab3e'
- value: 2
color: '#ebf438'
- value: 1
color: '#79cf3f'
- value: 0.5
color: '#24cbcc'
- value: 0.2
color: '#3296de'
- value: 0
color: '#373737'
entities:
- entity: sensor.rainfall_per_day
state_adaptive_color: false
it looks like this today:
If i hoover over the graph bars, it says:
1.5mm for today (Tuesday Aug 27)
9.9mm for Monday
20.5mm for Sunday
Sunday looks reasonable, it rained a lot on Sunday night from like 1am to 4am
When I go into sensor history for these days it looks like this
Today/Tuesday:
Showing 0.5mm, like the text in the graph. But the graph bar shows 1.5.
Yesterday/Monday:
Histor shows 1mm and mini-graph-card shows 9.9mm!!!??
Sunday:
Histor shows 20.5mm and mini-graph-card also shows 20.5!
I have to check tomorrow if Monday and Tuesday changes (and it doesn’t look like we will get any more rain today according to the forecast).
But why does it differ?
I searched the documentation and can’t seem to find what I’m looking for, is there any way to show the data point values on hover? I can’t tell what the temps where on this graph.
Hi everybody, I have a little problem with attributes, where I do not find my error.
Preformatted text
type: custom:mini-graph-card
entities:
- entity: light.lampe_hof
attribute: brightness
name: Lampe Hof
color: green
show_graph: true
hours_to_show: 24
points_per_hour: 10
Value is always correct shown in the preview, but no graph is plotted.
Can someone give me a clue, thanks a lot.
Hi THere,
Im trying to make a dynamic icon change color with the temperature. Does this format still work I found it a long way back in this thread…
card_mod:
style: |
ha-card {
color: [[ if(sensor.home_realfeel_temperature_min_today >= 30,"rgb(255, 0, 0);",
if(sensor.home_realfeel_temperature_min_today >= 22, "rgb(255, 153,0);",
if(sensor.home_realfeel_temperature_min_today >= 16, "rgb(255, 204,102);",
"rgb(153, 204,255);"))) ]]
}
Thank you for advice.
Check if this entity is stored in Recorder.
2 Likes
It has never been worked since card-mod supports jinja templates, not this “[[[“ syntax.
Even with a proper syntax, this code is to define some “color” property - but you need to define a color of a particular UI element (icon).
Check examples for mini-graph-card (there: main card-mod thread - 1st post - link at the bottom - mini-graph-card) as a starting point.
2 Likes
Hello. Help me figure this out.
I’m trying to use animation when the sensor is unavailable.
But it doesn’t work and I don’t know what I’m doing wrong.
I used the code from your example.
As a result, when the sensor is unavailable, the message Sensor off appears. But it doesn’t change color and isn’t animated.
Here’s the code.
type: custom:mini-graph-card
entities:
- entity: sensor.mw_bathroom_humidity
show:
labels: true
card-mod:
style: |
ha-card .states.flex .state .state__uom.ellipsis {
{% if states('sensor.mw_bathroom_humidity') in ['unavailable','unknown'] %}
display: none;
{% endif %}
}
ha-card .states.flex .state .state__value.ellipsis {
{% if states('sensor.mw_bathroom_humidity') in ['unavailable','unknown'] %}
color: red;
animation: blinking 0.5s linear alternate infinite !important;
{% endif %}
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
state_map:
- value: unavailable
label: Sensor off
- value: unknown
label: Sensor off
Start with correcting a typo - “card_mod”.
Also, “ha-card” is not needed here since you specified sub-elements. If you see it in any my examples - you can safely omit it.
1 Like
Hi, maybe someone will have some idea what I doing wrong.
I want to show second entity when the first will exceed some indicated value.
type: custom:mini-graph-card
entities:
- entity: sensor.szambo_czujnik_my_ultrasonic_sensor
name: Aktualny poziom szamba
show_state: true
- entity: sensor.max_szambo
name: Max szambo
show_state: false
show_graph: >
{% set state = states('sensor.szambo_czujnik_my_ultrasonic_sensor') %} {%
if is_number(state) and state | float > 16 %} {{ false }} {%- else -%}
{{ true }} {% endif %}
I also try this code in template and it seems that here it’s work:
the result type is boolean
The card does not support templates.
1 Like
Is there other way to solve my case?