What does the state look like, could you show me an example?
It doesnât look like it worked, but to be honest I cannot see the binary_sensor changing from on to off in the log book (even tho, that might simply not be accurate).
I guess tonight I will need to check and make sure it goes to âonâ, and if it does, tomorrow I will check again.
For now, no luck.
This is how I did add the code (with the map as you provided of course):
- entity: binary_sensor.night_time
color: gray
name: Night Time
show_fill: true
show_line: false
show_points: false
show_legend: false
y_axis: secondary
Iâm still struggling with line coloursâŠ
I confess when I first asked this question it transpires that I too was not using the bundle(!) but now that I am all up to date (bundle with F12 and hard reload) I still see the wrong colours with lines.
Iâm sure itâs something I am doing wrong but I canât see itâŠ
- type: custom:mini-graph-card
icon: mdi:white-balance-sunny
entities:
- entity: sensor.brightness
decimals: 0
points_per_hour: 2
indicator: off
align_icon: left
align_header: left
align_state: left
font_size: 70
more_info: false
animate: true
hour24: true
color_thresholds:
- value: 0
color: '#000000' # Black
- value: 1
color: '#D3D3D3' # Light Grey
- value: 15
color: '#FFFF00' # Yellow
show:
fill: true
extrema: false
labels: hover
graph: bar
icon_adaptive_color: true
And as an aside it is correct to have such a tall bar for a value of zero?
The colours look correct to me. Black up to 1, Grey between 1 and 15, Yellow-green above 15.
Thanks for the inspiration 
I saw in your post with the code some other nice looking graph, mind to share them too?
Of course, if someone is interested on the view in the screenshot, simply ask
4 Likes
Wow, you really went to town on that one! Impressive.
Which graph are you interested in?
But it is showing grey on the line graphâŠ
Yeah the smoothing is rather aggressive. Set it to :
color_thresholds_transition: hard
This has been a complaint of mine for a while. There are work-arounds. Basically set more levels, or donât use smoothing.
This one :
On your thread you posted just the âleft columnâ where the data are, and that now I have but your graph looks fairly nice and I would like to have mine next to yours to decide which one lookgs better depending on what data it is showing
And yes, I go to town on everything that is interesting and well done, I guess you might have saw a few post back what I did for the weather view
EDIT: Technically, if the confs are the same for all, I might need just a baseline 
Or at least a baseline for each different (ex the two big ones, one Watts one and the Voltage one that they have different threshold and colors)
Yes they are all pretty much the same.
Hereâs the next column over. Youâll need card-mod installed for the style: if you want to use it.
cards:
- color_thresholds:
- color: '#039BE5'
value: 0
- color: '#0da035'
value: 600
- color: '#e0b400'
value: 1200
- color: '#e45e65'
value: 2400
color_thresholds_transition: hard
entities:
- sensor.tariff_31_power
group: false
hour24: true
hours_to_show: 24
line_width: 4
name: Lights and Power
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
style: |
ha-card {
border: solid 2px var(--primary-color);
}
type: 'custom:mini-graph-card'
- color_thresholds:
- color: '#039BE5'
value: 0
- color: '#0da035'
value: 600
- color: '#e0b400'
value: 1200
- color: '#e45e65'
value: 2400
color_thresholds_transition: hard
entities:
- sensor.tariff_41_power
group: false
hour24: true
hours_to_show: 24
line_width: 4
name: Heating and Hot Water
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
style: |
ha-card {
border: solid 2px var(--primary-color);
}
type: 'custom:mini-graph-card'
- color_thresholds:
- color: '#039BE5'
value: 0
- color: '#0da035'
value: 600
- color: '#e0b400'
value: 1200
- color: '#e45e65'
value: 2400
color_thresholds_transition: hard
entities:
- sensor.total_power
group: false
hour24: true
hours_to_show: 24
line_width: 4
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
style: |
ha-card {
border: solid 2px var(--primary-color);
}
type: 'custom:mini-graph-card'
type: vertical-stack
I was just thinking how good your graphs were. The grass is always greener on the other side I guess.
2 Likes
Here you go, wondering should I just remove the â:â and replace with â.â
I just dont want to see data like 9 hrs 80 which is what I was seeing, hence converting the 80 to 48 mins, but could settle with 9.48 hrs
yep, removing the colon and changing to a stop means it displays! This is perfect.
original:
with fixed hours and minutes:
with fixed hours and minutes but the line hidden:
just need to work out how to hide the legend, but wanted to post before the times were all out!
1 Like
with legend hidden:
I love this card!
1 Like
Donât get me wrong, I like how it turned out on my side, but I still think that some of those graphs can be done in a clearer way
For example, maybe the total wattage in use in the house itâs better with a line than with a bar
Well, using color_thresholds_transition: hard and graph: line gives me this
Still no sign of black on the line.
But this
# color_thresholds_transition: hard
color_thresholds:
- value: 0
color: '#000000' # Black
- value: 1
color: '#000000' # Black
- value: 15
color: '#FFFF00' # Yellow
Gives me this
Which whilst not exactly what I want is definitely good enough in this case.
@tom_l would you also mind to share the voltage one please? ^^
Just because of the color and an idea on what threshold there should be on Main Voltages
Thanks
The colour thresholds are for my country and statesâs specified voltage range (230V +/- 10%), adjust for yours:
color_thresholds:
- color: '#039BE5'
value: 0
- color: '#0da035'
value: 207
- color: '#e45e65'
value: 253
color_thresholds_transition: hard
entities:
- sensor.mains_voltage
group: false
hour24: true
hours_to_show: 24
line_width: 4
points_per_hour: 4
show:
extrema: true
fill: fade
labels: false
style: |
ha-card {
border: solid 2px var(--primary-color);
}
type: 'custom:mini-graph-card'
Gradient is quite hard to get right, especially when height is so limited, basically whatâs happening in your example is that black is rendered at the very bottom of the graph/card and the line is slightly offset from the bottom for you to be able to see the line and points even if itâs at the lower bound 0 in this case.
If the graph was taller you probably wouldât notice this as much, Iâll see what I can do about it in the future.
For now you could try to offset your lower thresholds by x amount (which I saw you did in a recent post) 
@tom_l, @SeLLeRoNe, @Matt_Barnes, nice graphs!
@tom_l, @SeLLeRoNe How is the performance on the pages with that many graphs? what type of database are you using in HA?
2 Likes
Performance on the computer looks pretty nice (Chrome Browser), running MariaDB as SQL Database on an Intel NUC.
I have noticed that on mobile I do have a problem, but I need to test it properly because I have the feeling is not the graph but some other component, since it appears to happen only on the home page
1 Like
Perfectly acceptable performance (<2 seconds load from cache clear on my local 1GB/s network). I use MariaDB and Hassio on an i7 mini PC. I found lowering the number of points per hour helps considerably with render time. Mobile is fine too, though slightly slower.
The only thing that is bugging me is constant refreshing of the card in edit mode but I think thatâs a home assistant thing. It started happening a couple of updates ago.
1 Like