can you share your code?
I basically just want to get as close as possible to this:
Only showing current use and no history. Each bar is a separate sensor.
1 Like
Then I already proposed you to use “lower_bound=0”.
But you declined this proposal due to unclear reason.
If you need the whole area below the line colored of the same color - use “fill=true”.
Yes, i tried that, but is that not just adjusting y axis? It is still showing a historic graph.
Probably not getting your point, but may be you need not a graph at all but something like a vertical bar-card.
Search for custom:bar-card.
Thanks! Will look into it!
Just to clarify, so that i know what fixed value does.
If you have graph based on a sensor which is showing 25 out of 50. Using fixed value, will the graph be on the middle of the y axis or on the bottom like my result?
Do not remember.
Open source code, find “fixed_value” and check what it does.
hi im trying to get a chart something like this , can someone help
these sesnors keeps updating state for every 5 mins and i want it show the recent value in bar graph like this …is it possible?
soo far made this but its no way near to something i wanted also is it possible to change the header value to some other sensor value
thanks for responding but i want it in a graph type like below. below it shows for months but i want it to show for one day and the highest value to be showed
and he have used single sensor to compare but i want it to show for 5 sensors in bar time like below …it could be great if you could vouch…
You may do everything supported by mini-graph-card. Some tricks may be done by card-mod. Do not ask about things which are obviously cannot be achieved )).
1 Like
sorry @Ildar_Gabdullin !! I was just trying to know if its possible. from your suggestion I have made this
but i want to control color of induvial bars separately . can you please help on this.
code:
type: custom:auto-entities
card:
type: custom:bar-card
height: 60px
width: 200px
positions:
icon: 'off'
indicator: 'off'
name: 'off'
value: inside
minmax: 'off'
entity_row: true
entities: []
sort:
method: state
reverse: true
numeric: true
filter:
include:
- entity_id: sensor.app*
- This is not related to mini-graph-card. This is about bar-card & auto-entities. Please move this discussion to any of these dedicated threads.
- There are settings in bar-card for colors.
- Since you are using auto-entities - you will need to specify colors for each row automatically. It is only possible by using a “template” option for auto-entities.
sorry for ff topic but is their any documentation how to use templates for multiple bars in auto entities…i need different colors for each bar if i need single i can use global values in template but as im using 5 bars how to make template for that?
Go to auto-entities thread please and post a question there.
1 Like
Hello, I would like to show the last bar as the text value. I have an accumulating water meter sensor. Mini graph gives me daily values using the delta aggregate function, but the value at the top shows the total number of litres through the system. I would like to show today’s value, ie. the last bar which is 416l
Is there a way to do this please? Thanks.
type: custom:mini-graph-card
icon: mdi:water
unit: Litres
entities:
- entity: sensor.emoncms_rainwater_acc
color: var(--primary-color
show_state: true
name: Rain Water consumption
hours_to_show: 168
group_by: date
aggregate_func: delta
color_thresholds:
- value: 200
color: var(--primary-color)
- value: 300
color: var(--accent-color)
- value: 400
color: var(--primary-color)
animate: true
show:
graph: bar
Maybe parameter ‘attribute’ from entities object will be useful for you.
Earlier we discussed why this style does not work in Safari:
card_mod:
style: |
.fill {
opacity: 1 !important;
}
Having analysed a source code (mini-graph-card/src/style.js), I found a reason.
The opacity initially comes from “revealing animation” - it sets opacity to some value<1.
And due to unknown reasons it is not possible to override the opacity in Safari.
So there are 2 alternatives for Safari:
– either replace the animation with a new one with “opacity: 1”;
– or disable animation.
Here they are:
- type: custom:mini-graph-card
entities:
- entity: sensor.xiaomi_cg_1_pm25
show_points: false
color: red
show:
fill: true
points_per_hour: 60
hours_to_show: 1
card_mod:
style: |
.fill {
animation: reveal_solid .25s cubic-bezier(0.215, 0.61, 0.355, 1) forwards !important;
}
@keyframes reveal_solid {
0% { opacity: 0; }
100% { opacity: 1; }
}
- type: custom:mini-graph-card
entities:
- entity: sensor.xiaomi_cg_1_pm25
show_points: false
color: red
show:
fill: true
points_per_hour: 60
hours_to_show: 1
card_mod:
style: |
.fill {
animation: none !important;
opacity: 1 !important;
}
and the original version (not for Safari):
- type: custom:mini-graph-card
entities:
- entity: sensor.xiaomi_cg_1_pm25
show_points: false
color: red
show:
fill: true
points_per_hour: 60
hours_to_show: 1
card_mod:
style: |
.fill {
opacity: 1 !important;
}
Works now in Chrome (Win), Safari (Mac OS 10.x), iPad (iOS 15.x).
2 Likes
wow - thanks!