yep, you can see under ‘‘color_thresholds:’’ section. Graphic colors change according to the data from the sensors and the choises under the ‘‘color_thresholds:’’ section. you can play around colors, if you like you can create rainbow.
Yes of course… So simple… Thanks!
Sagol!
//Regards…
Yes i just take a little exploration on add on. Rica ederim
Really enjoy the card for a long time now!
Only thing that is bothering me a little is the date and time for the extrema values in narrower cards. Is there a possibility to just show the extrema value?
See the following example: It works find with the wider card, but as soon as I place two cards in a row it gets very crowded.
Card-mod is required.
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
extrema: true
style: |
ha-card .info.flex .info__item .info__item__time {
display: none;
}
tldr… so sorry if this has been done before
Instead of coloring the graph line, I’d like to have the card show a background with colors along the y-axis, and the graph moving over that background. Could that be done? And of course I mean configured via the card settings, not some jpg as background, which would make it very flakey
a bit like this:
BTW, you may also hide MAX or MIN value:
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
extrema: true
style: |
ha-card .info.flex div.info__item:nth-child(1) {
color: transparent;
}
ha-card .info.flex div.info__item:nth-child(2) {
color: red;
}
Awesome, thanks that did it!
As far as I know - it cannot be done (please somebody correct me).
What you can do is:
- Create a graph with TWO data:
- required data (for example, Humidity);
- data much bigger than the required data (for example, CO2 ppm).
- Set an upper bound slightly bigger than the highest value of the required data.
- Select color thresholds for equal intervals.
But it will be anyway not a nice as your picture:
type: 'custom:mini-graph-card'
entities:
- entity: sensor.cleargrass_1_humidity
color: green
show_state: true
show_fill: false
show_points: false
- entity: sensor.cleargrass_1_co2
show_state: false
show_fill: true
show_line: false
hours_to_show: 6
points_per_hour: 60
name: Humidity
show:
labels: true
legend: false
color_thresholds_transition: hard
font_size: 100
line_width: 2
height: 200
upper_bound: 60
lower_bound: 0
color_thresholds:
- value: 0
color: magenta
- value: 12
color: red
- value: 24
color: orange
- value: 36
color: yellow
- value: 48
color: '#ffffd3'
You may experiment with colors etc )))
I was just writing up this in your thread… beat me to it
I’ll hop over then for this particular need thanks!
Please be prepared to give me a kickstart there for I did some initial scanning and am still rather without a clue…
Hello everybody, Is it possible to show the actual temperature on the left and the humidity on the right?
I searched for it, but I could not find an example.
type: 'custom:mini-graph-card'
name: Balkon
icon: 'mdi:sprout'
entities:
- entity: sensor.lumi_lumi_weather_temperature
name: Temperatur
color: red
show_line: true
show:
labels: true
extrema: true
show_points: true
show_legend: true
- entity: sensor.lumi_lumi_weather_humidity
name: Luftfeuchtigkeit
color: blue
show:
labels: true
extrema: true
show_points: true
show_legend: true
y_axis: secondary
show:
labels: true
labels_secondary: true
Thank you in advance!
Greetings,
Lukas
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
There are some errors in your code - the “show:” section must be only on the “root” level.
Thank you. It works now!
Can someone help me with getting the daily value bar chart to display the correct values.
This is the bar chart and for yesterday it is showing 8.31 kwh but the actual sensor value for yesterday was 17.97 so I am guessing my chart config might be incorrect
Daily sensor value:
The config:
type: 'custom:mini-graph-card'
name: Daily Energy Used
icon: 'hass:flash'
show:
graph: bar
hours_to_show: 168
group_by: date
entities:
- entity: sensor.daily_energy_peak
name: Energy
is there a way to change the graph card’s height?
Hi, you are awesome . I was looking to customize my graphs and this project is cool. One issue I have is with coping the examples I need to change the spaces or add remove “-” but I figure out it.
Tried that it didn’t work.
I’d like to do this as well, but someone asked above in the string (in 4/20) and the response was that it’s not possible without using another custom card type that allows you to define Jinja2 templates anywhere in Lovelace.