There is no such an option in this card.
There’s no other way to show that TB values? Different place, different order?
Regards.
You may try using card-mod (you will have to learn how to use it); also you may try other people’s forks of this card (cannot suggest you a particular fork).
1 Like
BTW, you got currently ONE reading for THREE sensors - so you got THREE bars.
After some period you may see more bars (6,9,12,…) - depends on your sensors, points_per_hour & hours_to_show.
In this case you may want to see a value for every bar (i.e. “last value” & “some old value”) - which is not supported by this card & cannot be achieved by card-mod.
1 Like
Thank You very much for help. I will handle that now. 
Regards.
Some more useful/useless card-mod styles
type: custom:mini-graph-card
entities:
- entity: sensor.xiaomi_cg_1_co2
hours_to_show: 1
points_per_hour: 10
line_color: cyan
line_width: 10
card_mod:
style: |
.line--point {
fill: red !important;
}
ha-card {
--mcg-hover: orange;
}
.line--point:hover {
r: 20 !important;
stroke: green;
}
inactive:
hovered:
point is selected:
Ever wanted to see weekends’ data highlighted?
code
type: custom:mini-graph-card
entities:
- entity: sensor.xiaomi_cg_1_co2
hours_to_show: 120
points_per_hour: 60
line_color: cyan
line_width: 3
show:
points: true
card_mod:
style: |
{% set points_per_hour = config.points_per_hour | float(default=0.5) -%}
{%- set hours_to_show = config.hours_to_show | float(default=24) -%}
{%- set TOTAL_POINTS = (points_per_hour * hours_to_show) | int -%}
{%- set START_TIME_OFFSET = now().today().weekday() * 24 + now().hour + now().minute/60 + 48 -%}
{%- set START = TOTAL_POINTS - (points_per_hour * START_TIME_OFFSET) | int +
1 -%}
{%- set END = START + (points_per_hour * 48) | int -%}
.line--point {
r: {{config.line_width | float(default=1) / 2}} !important;
stroke-width: 0 !important;
fill: inherit !important;
}
.line--point:hover {
stroke: green;
stroke-width: inherit !important;
}
.line--point:nth-child(n+{{START}}):nth-child(-n+{{END}}) {
fill: red !important;
}
.line--point:hover {
r: {{config.line_width}} !important;
stroke: green;
stroke-width: inherit !important;
}
Ofc it is up to YOU which periods to highlight - weekends, from 12:00 to 16:00, …
4 Likes
Hi,
how can the cache be deleted or rebuilt if the option cache is true for the mini-graph-card?
Some graphs show values are deleted on database for some days but if switch from cache false to true the graph showing the old values.
Try purging a browser’s cache.
I tryed CTRL + SHIFT + R without sucess but now I delete chrome browser cache for the domain and it works.
Thanks
Hey Guys, love the mini graph card!
I am trying to get it right.
I got two Cards, one for the Temperature (-10 to +40°C ) and one for the Humidity (0% to 100%) to display the in and outdoor values and also the Heating pattern - yellow line.
That works fine.
I have some trouble adding some binary sensors and getting them into scale
I like to add
- the open Window times (white fill) on the y-axis from 0 (open) to 1 (closed)
- the Day and Night times (cyan fill) on the y-axis from 0 (Day) to 1 (Night)
- the Sun elevation (yellow fill) on the y-axis from -10° to 60° (so you get an idea of the sunshine)
Could you tell me how I can get a different entities adjusts in y scale ?
Temperature Card
type: custom:mini-graph-card
name: Temperatur
hours_to_show: 24
points_per_hour: 4
update_interval: 15
line_width: 4
align_state: center
icon: mdi:water
decimals: 0
upper_bound: 40
lower_bound: -10
upper_bound_secondary: 1
lower_bound_secondary: 0
height: 300
font_size: 100
aspect_ratio: 1/1
show:
name: true
icon: true
state: true
graph: true
legend: true
average: false
extrema: false
labels: true
labels_secondary: false
name_adaptive_color: true
icon_adaptive_color: true
color_thresholds:
- value: 0
color: "#99CCFF"
- value: 10
color: "#5CADFF"
- value: 15
color: "#1F8FFF"
- value: 20
color: "#f39c12"
- value: 21
color: "#d35400"
- value: 22
color: "#c0392b"
- value: 25
color: "#F55A5A"
entities:
- entity: sensor.aktuelle_temperatur_arbeitszimmer_mittelwert
name: innen
state_adaptive_color: true
show_state: true
align_state: left
show_fill: false
- entity: sensor.hk_arbeitszimmer_nachste_geplante_temperatur
name: Heizung
line_width: 1
show_line: true
show_points: true
show_legend: false
show_fill: false
color: yellow
- entity: sensor.aussentemperatur_mittlerer_wert
name: außen
state_adaptive_color: true
show_state: true
align_state: right
show_fill: false
- entity: sensor.sun_solar_elevation
name: Sonnenstand
show_fill: true
show_line: false
color: orange
show_legend: false
show_points: false
upper_bound: 60
lower_bound: -10
- entity: sensor.day_night
name: Tag/Nacht
color: rgba(0,255,255,0.85)
show_fill: true
show_line: false
show_points: false
show_legend: false
y_axis: secondary
- entity: binary_sensor.fenster_arbeitszimmer_offnung
name: Fenster
color: rgba(255,255,255,0.85)
show_legend: false
show_fill: true
show_line: false
show_points: false
aggregate_func: max
y_axis: secondary
state_map:
- value: "off"
label: geschlossen
- value: "on"
label: offen
tap_action:
action: more-info
entity: climate.hk_arbeitszimmer
card_mod:
class: middle-left
Humidity Card
type: custom:mini-graph-card
name: Luftfeuchtigkeit
hours_to_show: 24
points_per_hour: 4
update_interval: 15
line_width: 4
align_state: center
icon: mdi:water
decimals: 0
upper_bound: 100
lower_bound: 0
upper_bound_secondary: 1
lower_bound_secondary: 0
height: 300
font_size: 100
aspect_ratio: 1/1
show:
name: true
icon: true
state: true
graph: true
legend: true
average: false
extrema: false
labels: true
labels_secondary: false
name_adaptive_color: true
icon_adaptive_color: true
color_thresholds:
- value: 0
color: "#98C3E3"
- value: 60
color: "#4A72CA"
- value: 75
color: "#FE0002"
- value: 100
color: "#660001"
entities:
- entity: sensor.aktuelle_luftfeuchtigkeit_arbeitszimmer_mittelwert
name: innen
state_adaptive_color: true
show_state: true
align_state: left
show_fill: false
- entity: sensor.aktuelle_luftfeuchtigkeit_aussen_mittelwert
name: außen
state_adaptive_color: true
show_state: true
align_state: right
show_fill: false
- entity: sensor.luftfeuchtigkeit_arbeitszimmer_delta_aussen
name: Δ g/m³
state_adaptive_color: true
show_state: false
align_state: right
show_fill: false
- entity: sensor.sun_solar_elevation
name: Sonnenstand
show_fill: true
show_line: false
color: orange
show_legend: false
show_points: false
upper_bound: 60
lower_bound: -10
- entity: sensor.day_night
name: Tag/Nacht
color: rgba(0,255,255,0.85)
show_fill: true
show_line: false
show_points: false
show_legend: false
y_axis: secondary
- entity: binary_sensor.fenster_arbeitszimmer_offnung
name: Balkontüre
color: rgba(255,255,255,0.85)
show_legend: false
show_fill: true
show_line: false
show_points: false
aggregate_func: max
y_axis: secondary
card_mod:
class: middle-right
Suggest you to not use binary sensors & state_map.
Use 0-1 sensors on a secondary y-axis with different colors.
Found a quite old post, with your code for a compact graph. I can not getting it to work, even if I copy all your code and only change the entiry. The “state” will not show on the -50 position, it will stay below the card. It do show on the right side. It is you post 2381 in this thread.
Something might have changed, or is your graph still working?
style: |
ha-card .header.flex .name.flex {
width: 200px;
}
ha-card .states.flex {
margin-top: -50px;
}
ha-card .states.flex .state .state__value.ellipsis {
font-size: 150%;
align-self: center;
}
1 Like
Can you fade a bar graph?
Using the same y-axis, you need to scale one of them to have the same range as the other. In other words, you need to make template sensors of your binary sensors with -10 for off and 60 for on. There are similar posts about this on this topic.
hi guys,
i try to use this card and have a question. is it possible to show the value of the points when doing the mouse over like in the original graph card?
It is a default behaviour.
mmmhh…but not at the position of the mouse!!
it only shows the values where the “state” is placed right and i have to activate the points?!
Where a POINT with a state is placed, of course. It will not show you a state where there are no points.
so is there a way to make the points transparent?
Suggest you to use a simple picture to make your post clear