Finally a long talked feature for mini graph card.
If you already have mini graph card installed
Copy mini-graph-card-dynamic.js to config/www/mini-graph-card-dynamic.js
NOTE: This will not work in the community folder only www
Add as a dashboard resource
local/mini-graph-card-dynamic.js
Hit Ctrl+R to refresh the page
All will be working
Download the mini-graph-card-dynamic.js file from the link in my previous post and place into config/www
In HA, navigate to Settings > Dashboards
Click on the three dots in the top right corner and hit Reccources
Click on + Add reccources at the bottom right
In the popup window, add this in the URL field: /local/mini-graph-card-dynamic.js
Select JavaScript module
Hit Create
Restart Home Assistant.
Yes I did that. Downloaded and made a new folder in the community folder for mini-graph-card-dynamic and placed your file in there.
I am considering adding a possibility to use input_number & input_boolean entities for some options like âhours_to_showâ, âshow::pointsâ etc, but this will not happen very soon.
Iâm a bit confused by this bit in your post:
Make a new folder, copy âmini-graph-card-bundle.js.gzâ over.
Rename to âmini-graph-card-dynamic.js.gzâ
mini-graph-card-bundle is the original card, you donât need it for mini-graph-card-dynamic to work. The only file thatâs needed is mini-graph-card-dynamic.js from my other post.
The gz file or anything âbundleâ belong to the original card, donât touch it.
I am a bit confused by this bit. change the filename accordingly?
OK I have copied it directly into the www folder rather than the community folder, seems to work now, thanks.
@fauxPalindrome I am not sure what I am doing wrong here but the slider to change the graph hours is not showing up.
I have tried multiple different input_numbers.
I have also tried replacing the following in multiple different cards.
type: custom:mini-graph-card-dynamic
hours_to_show: input_number.graph_hours
type: custom:mini-graph-card-dynamic
name: 24hr Atmospheric Pressure
entities:
- entity: sensor.netatmo_devonport_tas_indoor_pressure
name: Upstairs
color: mediumaquamarine
show_state: true
show_indicator: false
show:
name: true
icon: false
legend: true
extrema: false
fill: fade
labels: hover
labels_secondary: false
state: true
font_size_header: 9
align_state: left
hour24: true
animate: true
group: true
smoothing: true
line_width: 3
hours_to_show: input_number.graph_hours
points_per_hour: 15
height: 150
EDIT: It does work with a separate slider control, looked like that was part of the card in your original post. This will be sufficient for my use case, using the one control for all graphs.
Hi. Same here. I cannot see the slide bar as in original post. Or that is a separate card?
Must be a stack in card or something. Unless there is a show slider option.
Sorry I should have mentioned that I was using stack-in-card, a grid, and some card_mod to change the look of the input_numberâs slider in my example, itâs not the mini graph card thatâs made like that.
Can you share that card? 
I have removed the grid and the markdown cards. Hereâs the code to get this look:
type: custom:stack-in-card
cards:
- type: custom:mushroom-number-card
entity: >-
input_number.YOUR_INPUT_NUMBER
layout: horizontal
icon_color: accent
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: none
display_mode: slider
icon_type: none
primary_info: none
secondary_info: none
card_mod:
style:
.: |
ha-card {
height: 14px !important;
min-height: 14px !important;
max-height: 14px !important;
margin-top: 14px !important;
margin-bottom: 6px !important;
margin-left: 6px !important;
margin-right: 6px !important;
}
mushroom-number-value-control$: |
:host {
height: 14px !important;
min-height: 14px !important;
max-height: 14px !important;
--control-height: 14px !important;
--slider-color: rgba(149, 132, 107, 1) !important;
--slider-bg-color: rgba(64, 64, 64, 1) !important;
}
- type: custom:mini-graph-card-dynamic
name: NAME_HERE
icon: mdi:thermometer
hours_to_show: >-
input_number.YOUR_INPUT_NUMBER
points_per_hour: 5
line_width: 2
hour24: true
font_size_header: 14
font_size: 100
lower_bound: ~100
min_bound_range: 1
smoothing: true
cache: true
tap_action: none
entities:
- entity: sensor.YOUR_SENSOR
name: YOUR_SENSORS_NAME
show_fill: true
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
show:
legend: false
icon: false
extrema: true
name: false
state: false
fill: true
points: false
average: false
labels: false
color_thresholds:
- value: 13.2
color: "#324696"
- value: 18.6
color: "#6bb3cb"
- value: 20.6
color: "#73a767"
- value: 23.8
color: "#73a767"
- value: 24.8
color: "#ff7b00"
- value: 26.2
color: "#ff3838"
Thank you. If you donât mind, what card did you used to achieve those dates and minutes etc.?
That is nice.
@fauxPalindrome when adding mini-graph-card-dynamic to my mini graph bar charts the colour thresholds do not work for all of my bar graphs.
With mini-graph-card-dynamic
Without mini-graph-card-dynamic
type: custom:mini-graph-card-dynamic
entities:
- entity: sensor.whoop_andrew_day_kilojoules
name: Daily Kilojoules (kJ)
show:
graph: bar
name: true
extrema: true
average: true
state: false
icon: false
limits:
min: 0
max: 4000
color_thresholds:
- value: 4184
color: gray
- value: 7531
color: purple
- value: 9205
color: blue
- value: 11297
color: limegreen
- value: 12552
color: lime
- value: 16736
color: gold
font_size: 80
height: 113
hours_to_show: input_number.graph_hours
points_per_hour: 0.0417
group: true
I seek help the following situation I am stuck. I have a sensor value which records only values dependend on a condition (e.b. heatpump cooling mode = on)
This works out fine when I display the sensors history. However in the minigraph a straight line is drawn from the last valid value until real values appears again. I donât know how to show the gap of values as in the history.Thanks in advance for any suggestions to solve my problem
Gaps are not supported. Your possible way could be adding a background 0/1 graph as was discussed above.
