Not really, closest you could do is 30 day basis I guess, hours_to_show = 1 / (24 * 30) = 0,001388888888889.
Data points would be calculated from the current date so not grouped by month.
Can’t reproduce that one, do you have an example config?
I’d like to bring up one of my earlier posts here to see if anything has changed:
Essentially, I’m graphing my net energy usage, which can be both positive and negative (solar), and there are a couple of issues that I’ve found with the presentation of that kind of data.
First, there’s no clear way to denote zero, which I’ve sorta solved by using a separate data series that always returns zero, and the second is that the fill always starts from the bottom of the graph. I would like to see it fill from zero to the value, positive or negative, with the fill following the line color (green for negative, red for positive).
Is there a way to solve either issue, or should I file them as feature requests in github?
None of those features are available and I don’t think they will ever be in this project, I would recommend you to look for a more mature/advanced graph solution such as Grafana.
Looking at your prev posted pic of the graph, I would recommend setting a fixed lower and upper bound, so 0 always stays in the center of the graph, use color thresholds to make the line switch color depending on > 0 or < 0.
I’m actually doing that already, even though it’s not obvious from the graph. I have the line changing color from green to red at zero and I’ve set upper and lower bounds to put the center at zero, and that works fine. I just have to add another “fake” series fixed at zero to add the (purely aesthetic) zero-line and fill doesn’t work as I’d expect. It’s really very close to what I’d like to see, and “zero-aware fill” is the only part that I can’t address. It’s not critical and I’ve just disabled fill for now, but I’m hoping that there are kindred souls who are looking for something similar.
Thanks for the value, I’ll give it a try.
For the config is the same I provided before:
- type: custom:mini-graph-card
name: Temperature
icon: "${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ? 'fas:thermometer-three-quarters' : vars[0] > 20 ? 'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' : 'fas:thermometer-empty' }"
more_info: false
height: 150
line_width: 4
hours_to_show: 168
points_per_hour: 0.25
aggregate_func: max
group_by: hour
group: false
hour24: true
# animate: false
decimals: 1
font_size: 100
font_size_header: 14
align_header: default
align_icon: right
align_state: center
lower_bound: -5
upper_bound: 40
show:
name: true
icon: true
state: true
graph: line
fill: false
points: false
legend: false
extrema: false
labels: false
name_adaptive_color: true
icon_adaptive_color: true
color_thresholds:
- value: 5
color: "#0055FF"
- value: 15
color: "#FF6600"
- value: 20
color: "#FFAA00"
- value: 22.5
color: "#FF7700"
- value: 25
color: "#FF3700"
style: |
ha-card {
padding: 16px !important;
}
# ha-icon {
# color: [[ if(vars[0] >= 30, "rgb(255, 0, 0);", if(vars[0] >= 22, "rgb(255, 153, 0);", if(vars[0] >= 16, "rgb(255, 204, 102);", "rgb(153, 204, 255);"))) ]]
# }
entities:
- entity: sensor.house_temperature
name: House
color: '#FF5000'
show_state: true
- entity: sensor.dark_sky_temperature
name: Outside
color: '#0099CC'
show_state: true
- entity: input_number.night_time
color: '#FFFFFF'
name: Night Time
smoothing: false
show_fill: true
show_line: false
show_points: false
show_legend: false
show_state: false
y_axis: secondary
As as I set fill to true it works:
It might be possible to achieve with some css transforms, custom bounds and possibly template sensors, here’s a quite interesting graph I came up with recently with the help of card-mod and some custom bounds:
Note, center is 4 in the screenshot and not 0
- type: custom:mini-graph-card
name: Energy
hours_to_show: 168
smoothing: false
line_width: 2
entities:
- entity: sensor.prod
name: Production
color: "#27ae60"
- entity: sensor.consump
y_axis: secondary
name: Consumption
color: "#e74c3c"
show:
labels: true
labels_secondary: true
icon_adaptive_color: true
lower_bound_secondary: -6
lower_bound: -6
upper_bound_secondary: 14
upper_bound: 14
hours_to_show: 168
style: |
.graph__labels.--secondary .label--max {
order: 5;
}
.line--rect,
.fill--rect,
.line--points {
height: 50%;
}
g .line--rect:last-of-type,
g .fill--rect:nth-of-type(2),
svg > g:last-child {
transform: scale(1, -1);
transform-origin: center;
}
2 Likes
That looks amazing 
That’s really cool! I’ll play around it.
I’m also playing with Influx/Grafana and it looks like a) Grafana integration into Lovelace seems a bit hacky with iframes and b) it doesn’t work at all with Ingress through Nabu Casa. Something native would be a better solution for me on my main Lovelace view.
Here’s a better example of what I have now:
Oh, I see what you mean now, yeah that’s true, in fact all entity options that are show_* works that way, you can’t enable them if they are disabled in the base, you can only do the other way around, disable them if they are enabled in the base. That’s probably also why the option descriptions are Set to false to hide the *.
(With enabled/disabled I refer to true/false)
Would require some work to change this, not sure if it will happen, you can kinda achieve the wanted style in other ways (card-mod).
So I should put fill true on “show” and in each entity put show_fill to false except the night_time one?
That would be the way to go yes, and if you want the other effect of fill: false (the padding) add it with card-mod.
Hi Kalkih,
Is there any way to see the time and temperature scale as in History Graph Card?
If not, there is the possibility to implement that?
thanks in advance…
No, that’s not possible right now.
Yes, It could be implemented, there’s an open feature request for it on github #21.
1 Like
Not sure what is going on here:
aggregate_func: max
color_thresholds:
- color: '#039BE5'
value: 0
- color: '#0da035'
value: 5
- color: '#e0b400'
value: 7.5
- color: '#e45e65'
value: 10
entities:
- entity: sensor.total_cost_today
group_by: date
hours_to_show: 168
name: Energy Cost Per Day
show:
graph: bar
labels: true
style: |
ha-card {
border: solid 2px var(--primary-color);
}
type: 'custom:mini-graph-card'
The last two days are incorrect. For example yesterday is showning $3.79 when it was actually $5.64
Hi,
I have two graphs in my diagram and I would like to have different line_width for each of them.
Is this possible?
When I’m trying the line_width option it applies to both the lines…
Make sure you got the latest version (0.8.2), fixed some issues related to group by date when missing data etc.
Otherwise, possibly related to #193
Hey,
No that’s not possible, as you noticed, it applies to all entities and I don’t think this will change, line_width is used in various places for the rendering and computation of the graph, to determine margins/padding etc.
Make sure you got the latest version (0.8.2), fixed some issues related to group by date when missing data etc.
Otherwise, possibly related to #193
Yep I’m up to date. It’s happening when not hovering too.
It’s strange, this morning when I checked the values were correct. Now they are not correct again.
EDIT: it seems to be some sort of caching problem. Forced cache refresh (Ctrl+Shift+R or Ctrl+F5) does not help but opening a private browsing window does show the graph correctly. Also the iOS app (beta 2.0) always shows the correct graph.
I understand that this lovelace works with sensor entities. Is it possible to work with climate entities? I have Air Conditioning Units that have temperature sensors and I would like to use this graphs to show history of current temperatures.
Soon HACS will be able to tell you if you don’t have a installed plugin added your Lovelace configuration.
The reason for that change was that I figured it was not fear to the developer to rewrite the name of the plugin…
1 Like