I got it, thanks for your help and congratulation for your absolutely fabulous button_card. I love it 
1 Like
I think the only way to achieve this is to use card-mod, there’s no option for that in mini-graph-card
I’d like to see the code too please, thanks!
So I’ve got a mini graph that works here. But what I want to do is take the target ‘value’ and set them to work based off an input_number that’s controlled on another dashboard. Below is what I currently a modified idea of what I want to achieve. This should allow me to goto the input_number card and change the target temp. Then from there change the color dynamically on a +/- 5 / 10 system. This should allow for the line to be green when in the range of the target temp.
type: ‘custom:mini-graph-card’
entities:
- sensor.tent_temperature
name: Tent Temp
show:
labels: true
color_thresholds: - value: ‘var((input_number.temp_target) - 40)’
color: ‘#231709’ - value: ‘var((input_number.temp_target) - 30)’
color: ‘#80604d’ - value: ‘var((input_number.temp_target) - 20)’
color: ‘#654321’ - value: ‘var((input_number.temp_target) - 10)’
color: ‘#005FFF’ - value: ‘var(input_number.temp_target)’
color: ‘#00FF00’ - value: ‘var((input_number.temp_target) + 10)’
color: ‘#FFB111’ - value: ‘var((input_number.temp_target) + 20)’
color: ‘#FF5E00’ - value: ‘var((input_number.temp_target) + 30)’
color: ‘#FF0000’
font_size: 50
Hi ibennani,
Were you able to get this to work? I am trying to do something similar by using a template to set the value but I have so far been unsuccessful. I was able to create the template sensor but I am unsure of the syntax needed for a variable value within the color thresholds.
@Adamasc @Bret_Bowlby @ibennani, you can use https://github.com/iantrich/config-template-card to achieve what you want.
2 Likes
I tried using the config-template-card but I don’t believe I’m using it correctly. Sorry as I’m rather new to using YAML to program. I can code directly to the ESP32 everything I want, but using ESPHome has been a rather difficult learning curve for me. Here’s what I came up with for the config-template-card but still no dice.
type: ‘custom:config-template-card’
variables:
TEMP_STATE: ‘states[‘input_number.temp_target’].state’
entities:
- sensor.tent_temperature
card:
type: ‘custom:mini-graph-card’
entities:- entity: alarm_control_panel.alarm
value: ‘${TEMP_STATE}’
name: Tent Temp
show: null
labels: true
color_thresholds: - value: ‘${TEMP_STATE - 15}’
color: ‘#231709’ - value: ‘${TEMP_STATE - 10}’
color: ‘#80604d’ - value: ‘${TEMP_STATE - 5}’
color: ‘#654321’ - value: ‘${TEMP_STATE}’
color: ‘#005FFF’ - value: ‘${(TEMP_STATE + 5)}’
color: ‘#00FF00’ - value: ‘${TEMP_STATE + 10}’
color: ‘#FFB111’ - value: ‘${TEMP_STATE + 15}’
color: ‘#FF5E00’ - value: ‘${TEMP_STATE + 20}’
color: ‘#FF0000’
font_size: 50
- entity: alarm_control_panel.alarm
A small but useful advice - you should paste a code using this:
Then people will be able to copy/paste your code for analysis.
1 Like
Thanks for the heads up. I’ll be sure to use that from now on.
So many times I am trying to get a new card or function working in HA. When searching for help I will find great examples of graphs or other things but no code examples to help. Please remember there are all technical levels of people using and trying to learn HA. A little help is always appreciated.
1 Like
Thanks @RomRider. I finally got things sorted for my use case.
If anyone is interested, I was trying to get a minigraph card to show either red or green based on an attribute in my avanza stock sensor. This allows me to quickly see if a stock is up or down on the day.
type: 'custom:config-template-card'
variables:
pct_change: 'states[''sensor.msft_pct_change''].state'
entities:
- sensor.msft_pct_change
card:
type: grid
cards:
- type: 'custom:mini-graph-card'
entities:
- entity: sensor.avanza_msft
show:
labels: true
icon: false
extrema: true
name_adaptive_color: true
name: MSFT
font_size: 60
hours_to_show: 24
points_per_hour: 4
color_thresholds:
- value: '${pct_change < 0}'
color: '#820000'
- value: '${pct_change > 0}'
color: '#00FF00'
Are you sure it works?
I think the "pct_change" is a string - i.e. the condition "pct_change > 0" will be always TRUE.
You should use "parseFloat(pct_change)".
Any way to add a comma to the number in the graph card? As you can see, it’s not as aesthetically pleasing and a little harder to read without. Thanks in advance!
Latest beta implements that.
2 Likes
Hi Guys,
can anyone help me pls?
I try it with this Code:
- type: custom:button-card
entities:
- card: "custom:mini-graph-card"
noPadding: true
cardOptions:
name: Temp
entities:
- sensor.temperature_10
name: Temp
style:
width: 10%
top: 20%
left: 50%
template: base
But it shows me just this:
Where did you take this code?
This is absolutely wrong syntax.
Look at he ‘mini-graph-card’ description.
Start without ‘button-card’ - anyway you specified an embedded card in a wrong way((
The minigraph card is called here inside a fullscreen card, please don’t use this example
this is the correct syntax example:
- type: ‘custom:mini-graph-card’
entities:
- sensor.rm4_humidity
graph: line
detail: 1
hours_to_show: 12
name: Humidity
1 Like
Thank you.
Now i take this Code:
- type: custom:mini-graph-card
entities:
- sensor.temperature_10
graph: line
detail: 1
line_width: 8
hours_to_show: 12
name: Humidity
color_thresholds:
- value: 20
color: "#f39c12"
- value: 21
color: "#d35400"
- value: 21.5
color: "#c0392b"
style:
top: 10.5%
left: 43.14%
width: 10%
height: 10%
border-radius: 0.8vw
background-color: 'rgba(115, 115, 115, 0.2)'
But border-radius and the end dosent work:
any idea?