Are you sure it works?
I think the "pct_change" is a string - i.e. the condition "pct_change > 0" will be always TRUE.
You should use "parseFloat(pct_change)".
Any way to add a comma to the number in the graph card? As you can see, it’s not as aesthetically pleasing and a little harder to read without. Thanks in advance!
Latest beta implements that.
2 Likes
Hi Guys,
can anyone help me pls?
I try it with this Code:
- type: custom:button-card
entities:
- card: "custom:mini-graph-card"
noPadding: true
cardOptions:
name: Temp
entities:
- sensor.temperature_10
name: Temp
style:
width: 10%
top: 20%
left: 50%
template: base
But it shows me just this:
Where did you take this code?
This is absolutely wrong syntax.
Look at he ‘mini-graph-card’ description.
Start without ‘button-card’ - anyway you specified an embedded card in a wrong way((
The minigraph card is called here inside a fullscreen card, please don’t use this example
this is the correct syntax example:
- type: ‘custom:mini-graph-card’
entities:
- sensor.rm4_humidity
graph: line
detail: 1
hours_to_show: 12
name: Humidity
1 Like
Thank you.
Now i take this Code:
- type: custom:mini-graph-card
entities:
- sensor.temperature_10
graph: line
detail: 1
line_width: 8
hours_to_show: 12
name: Humidity
color_thresholds:
- value: 20
color: "#f39c12"
- value: 21
color: "#d35400"
- value: 21.5
color: "#c0392b"
style:
top: 10.5%
left: 43.14%
width: 10%
height: 10%
border-radius: 0.8vw
background-color: 'rgba(115, 115, 115, 0.2)'
But border-radius and the end dosent work:
any idea?
Thanks for this pure card… here my loveloce codes and sshot.
- type: vertical-stack
cards:
- type: 'custom:mini-graph-card'
entities:
- sensor.yatak_odasi_sicaklik
name: BedroomHeat
show:
labels: true
average: true
extrema: false
color_thresholds:
- value: 26
color: green
- value: 26.8
color: green
- value: 27.3
color: blue
- value: 27.9
color: red
hours_to_show: 48
points_per_hour: 1
update_interval: 30
line_width: 3
font_size: 100
- type: 'custom:mini-graph-card'
entities:
- sensor.yatak_odasi_nem
name: BedroomHumidity
show:
labels: true
average: true
extrema: false
color_thresholds:
- value: 36
color: red
- value: 38
color: orange
- value: 40
color: green
- value: 42
color: blue
hours_to_show: 48
points_per_hour: 1
update_interval: 30
line_width: 3
font_size: 100
1 Like
Like the line colors! How did you manage that?
1 Like
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…
1 Like
Yes i just take a little exploration on add on. Rica ederim
1 Like
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.
1 Like
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;
}
1 Like
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:
2 Likes
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;
}
1 Like
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 )))
2 Likes