Yes, it set to night and I did change the hours again
Sorry but I’m really out of ideas then 
I did a test with the code you shared, and still doesn’t work… like it is not mapping on/off to 1/0 in my opinion.
- type: vertical-stack
cards:
- type: custom:mini-graph-card
name: Temperature
hours_to_show: 168
points_per_hour: 0.25
entities:
- sensor.house_temperature
- entity: binary_sensor.night_time
color: '#FFFFFF'
y_axis: secondary
smoothing: false
aggregate_func: min
show_state: true
show_line: false
show_points: false
state_map:
- value: "off"
label: "Day"
- value: "on"
label: "Night"
It will take a transition from day to night or vice-versa before you see anything.
Yep I got that but I had this binary_sensor for a few days already, so technically speaking the data should already be there 
At some point I will figure that out… doesn’t make any sense to me 
I have also tried to re-install the card… mistery!
@tom_l i did some more work
Now it also consider the per-day base-cost of the electricity bill (configurable in the tariffs) and I will add the VAT and other costs calculation soon to have what it should look (once I monitor literally everything, or simply the mains) a monthly cost which is very close (if not exact) to what I got in the bill
I did some tests with you graph and realized that yes, with bars looks cleaner at least for now, but I have used your colors thresholds adaptim them to the costs aswell (daily/monthly/yearly)… I still have to do the same for Watts, Ampere and Volts, but there is no rush…
I think I can say I have accomplished quite a bit in the past 2/3 days thanks to your code as a baseline (and I also managed to fix the reset issue using a custom MQTT Automation with Sensor to keep the total updated and not reset it on every restart)
So, thank you very much!
3 Likes
I was thinking sth like this
If I have 1 hour for the show, then at the bottom of the minute section to see.
Yesterday I realized that the binary_sensor with tod platform you’ve suggested isn’t working for me…
For some odd reason it’s always off…
So what I did remember was to check check the input_number I was using before but never the logbook for the binary_sensor… bad Andrea!
I have now removed it and returned back to the input_number with the automations, removed the state_map (even if technically that wasn’t required) and updated all the graphs…
And now I can see it:
I did debug a bit, and I have also found out why it wasn’t working!!!
If I set animate: true, it stop working while if it’s false or commented out, it works!.
.
I guess that might be a bug? ^^
1 Like
No, that’s currently not possible.
@SeLLeRoNe Nice!
The tod platform is fairly new I think, so if you haven’t updated HA in a while I guess that might be the reason.
I’ll take a look at the animate issue, exactly what is not working when it’s set to true?
I am actually on the latest stable release, go figure
The secondary axis is not loaded when animate is set to true 
Thanks, should be fixed in the next release.
1 Like
I got a question
Is there a way to show an annual graph with a per-month bar?
hour_to_show 8760
what about points_per_hour?
Thanks
1 Like
Found another bug (at least I think )
If you have fill set to false in show, the secondary axis doesn’t show
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