Invalid indentation:
- Wrong placement for
color_thresholds- is not a property of some entity. - These are not “show” options:
update_interval: 30
icon_adaptive_color: true
name_adaptive_color: true
points_per_hour: 1
That’s what you thought now, isn’t it?
entities:
- entity: sensor.teplota_vonk
show_state: true
hour24: true
name: Venkajsia Teplota
show:
extrema: true
labels: true
color_thresholds:
- value: -10
color: '#0040ff'
- value: 0
color: '#00ffff'
- value: 10
color: '#ffcc33'
- value: 18
color: '#ffbf00'
- value: 23
color: '#ff4000'
type: 'custom:mini-graph-card'
Right
And you can add this:
update_interval: 30
icon_adaptive_color: true
name_adaptive_color: true
points_per_hour: 1
Cannot check it myself but the code seems right.
Thanks for pushing, the line works fine, icon and name working OK
i did try the mini-graph into custom:button-card, however I can’t fit if I turn the name, state or labels as true. Can you fit all the info on such small button?
I could but it becomes a real estate issue.
Another option beside button card may be grid, but real estate becomes an issue.
type: grid
cards:
- type: 'custom:mini-graph-card'
entities:
- entity: sensor.speedtest_download
show_state: true
- entity: sensor.speedtest_upload
show_state: true
style: |
ha-card {
transform: scale(1.0);
height: 95%;
border-radius: 10px;
width: 98%;
margin: -0px;
padding-top: 0px;
background-color: rgba(10,10,10,0.9);
border: solid 1.4px rgba(50,50,50,0.9);
box-shadow: 0px 0px 3px 0.5px #2D2F32;
text-shadow: 1px 1px 1px block;
}
line_width: 2
align_icon: state
font_size: 50
group: false
group_by: hour
hours_to_show: 48
fill: fade
show:
icon: true
legend: false
name: true
state: true
labels: false
graph: line
points: false
- type: button
tap_action:
action: toggle
entity: switch.workshop
- type: button
tap_action:
action: toggle
entity: light.pool_lights
Here was my original suggestion. Showing the extrema is a challenge. Eventually I added a pop up card to show the detail of the entity. The button image simply gives me a quick visual reference.
type: 'custom:button-card'
aspect_ratio: 1/1
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: []
card:
!include /config/lovelace/popups/climate_stats.yaml
custom_fields:
graph:
card:
type: 'custom:mini-graph-card'
entities: '[[entities]]'
animate: true
font_size: 75
hours_to_show: 48
line_width: 1
show:
extrema: false
name: true
icon: true
state: true
legend: false
fill: fade
!
4 Likes
I’m working on a wall tablet that will default to a stock page during market hours, and I’m wondering if anyone has a way to set a variable based on an entity attribute that can be used a color threshold (in this case the prior market close value). I know core HA was supposed to support templates in more places as of a few releases ago but this doesn’t work:
- type: custom:mini-graph-card
name: 'amzn'
icon: mdi:amazon
hours_to_show: 9
points_per_hour: 60
line_width: 1
color_thresholds:
- value: 0
color: red
- value: "{{ state_attr('yahoofinance.amzn', 'regularMarketPreviousClose') }}"
color: var(--accent-color)
color_thresholds_transition: smooth
height: 90
entities:
- entity: yahoofinance.amzn
Use config-template-card.
type: vertical-stack
cards:
- type: 'custom:config-template-card'
variables:
- 'states[''input_number.test_number'']'
entities:
- '${vars[0].entity_id}'
card:
type: vertical-stack
cards:
- type: entities
entities:
- input_number.test_number
- type: 'custom:mini-graph-card'
entities:
- entity: sensor.cleargrass_1_co2
hours_to_show: 6
points_per_hour: 60
show:
labels: false
fill: true
name_adaptive_color: true
icon_adaptive_color: true
color_thresholds_transition: smooth
font_size: 50
line_width: 4
height: 500
color_thresholds:
- value: '${parseFloat(vars[0].state) - 100}'
color: red
- value: '${parseFloat(vars[0].state) - 75}'
color: green
- value: '${parseFloat(vars[0].state) - 50}'
color: magenta
- value: '${parseFloat(vars[0].state) - 10}'
color: cyan
- value: '${parseFloat(vars[0].state)}'
color: orange
- value: '${parseFloat(vars[0].state) + 10}'
color: violet
- value: '${parseFloat(vars[0].state) + 75}'
color: blue
- value: '${parseFloat(vars[0].state) + 100}'
color: brown
1 Like
Using the card to display sensors’ change with “Day / Night” as a background graph:
type: 'custom:mini-graph-card'
entities:
- entity: sensor.cleargrass_1_co2
name: CO2
color: green
unit: ''
show_state: true
show_indicator: false
show_graph: true
show_line: true
show_fill: true
show_points: true
show_legend: false
state_adaptive_color: false
fixed_value: false
- entity: binary_sensor.night
name: Day/night
color: 'rgba(50,73,92,0.85)'
unit: ''
show_state: false
show_indicator: false
show_graph: true
show_line: false
show_fill: true
show_points: false
show_legend: false
state_adaptive_color: false
fixed_value: false
aggregate_func: min
y_axis: secondary
name: CO2
hours_to_show: 24
points_per_hour: 60
aggregate_func: last
update_interval: 0
height: 150
line_width: 1
hour24: true
lower_bound: ~400
lower_bound_secondary: ~0
smoothing: false
show:
name: true
icon: true
state: true
graph: true
fill: fade
points: true
legend: false
average: false
extrema: true
labels: true
labels_secondary: true
state_map:
- value: 'off'
label: '0'
- value: 'on'
label: '1'
Recently I realized that the browser is flooded by warnings:
I suspect that this happens since the
"state_map" is provided only for one graph.So this issue - https://github.com/kalkih/mini-graph-card/issues/271 - is more important, it is not just an “improvement”.
Another case - let’s use only ONE graph with state_map like this:
state_map:
- value: unavailable
label: Sensor off
- value: unknown
label: Sensor off
Even now we have to receive lots of warnings.
So my proposal is:
- provide
"state_map"for all entities; - meanwhile DISABLE these warnings.
1 Like
WOW
Could you post the code for this graph?
It’s great looking!!
Hello!
This is a great add on and I have had really good success with using it basically everywhere in lovelace!
I am having one issue with displaying ink level bar graph.
I want to to show the ‘last’ state of each ink level but having no luck. No matter what I do, it shows each ink level in groups:
Any idea how to make each ink level it’s own bar showing the last recorded ink level?
Here’s my Panel YAML:
type: 'custom:mini-graph-card'
name: Canon Pro-100 Ink Levels
icon: mdi:printer
hours_to_show: 1
points_per_hour: 1
show:
graph: bar
legend: false
state: false
fill: true
labels: false
points: false
entities:
- entity: sensor.canon_pro_100_series_black_bk
name: Black
color: Black
- entity: sensor.canon_pro_100_series_cyan
name: Cyan
color: Cyan
- entity: sensor.canon_pro_100_series_gray
name: Gray
color: Gray
- entity: sensor.canon_pro_100_series_light_gray
name: Light Gray
color: "#D3D3D3"
- entity: sensor.canon_pro_100_series_magenta
name: Magenta
color: Magenta
- entity: sensor.canon_pro_100_series_photo_cyan
name: Photo Cyan
color: "#e0ffff"
- entity: sensor.canon_pro_100_series_photo_magenta
name: Photo Magenta
color: "#ff80ff"
- entity: sensor.canon_pro_100_series_yellow
name: Yellow
color: Yellow
What is an update interval for these sensors?
Also add this:
aggregate_func: last
Thank you, apparently my home assistant wasn’t previewing the card correctly. Once I saved the panel, it shows up correctly. It seems to be working without adding the aggregate function
Can someone please tell me how to do the basic two sensor in the same graph thing? I can not for the love of me make it work…
type: 'custom:mini-graph-card'
entities:
- entity: sensor.cleargrass_1_temp
color: green
show_state: true
show_points: false
name: Temp
- entity: sensor.cleargrass_1_humidity
color: blue
show_state: true
show_points: false
y_axis: secondary
name: Humidity
hours_to_show: 6
points_per_hour: 60
name: Climate
show:
labels: true
legend: true
icon: false
labels_secondary: true
line_width: 2
height: 200
lower_bound: 0
1 Like
Hi, I think i’ve read through all posts related to hovering, but I couldn’t find anything. I have three graphs with my power measurement of the last hour, day and month. I would like to hover over a point and see it’s value but I don’t want to see the current state all the time as it would be 3 times the same. Does anyone know how to do that?
Thanks
This doesn’t look like a mini graph card. Could you clarify?
sorry wrong topic, i thought i opend another one
It is possible for a stock history-graph card