Glad the one issue is solved.
Nothing immediately comes up regarding the font. I’ll think more. Those fonts should be standard, but have you tried others like good ol’ Arial?
I didn’t see this in the 5 years of comments so forgive me if I missed it. 
Is there a way to have this value of the card show the sum of all the items?
Create a template sensor, add it as the 1st sensor and switch off showing it’s graph, show only its state, and do not show states of other sensors.
2 Likes
Worked perfect, thank you for the suggestion.
I’m also interested in doing this - any tips on how to make this work? Thanks!
Place the mini-graph-card inside config-template-card (CTC) & define ANY option dynamically by using JS templates. But using the card inside CTC may have side effects.
1 Like
i posted this in reply to a thread for having a zero line for solar generation vs battery consumption.
it was suggested i post it here…so here it is for anyone that needs it, this is how i did it.
i created a template sensor in configuration.yaml
template:
- sensor:
- name: zero
unique_id: zero
state: 0
here is my card config for the mini-graph-card
- type: custom:mini-graph-card
name: I/O Power
entities:
- entity: sensor.greenhousev2_consumption_watts
- entity: sensor.zero
color: rgba(200,200,200,0.2)
show_fill: false
show_line: true
show_points: false
show_legend: false
line_width: 1
- color: '#ACACAC'
entity: sun.sun
name: Sun
show_line: false
show_points: false
show_legend: false
y_axis: secondary
decimals: 2
unit: watts
line_color: '#e74c3c'
line_width: 3
font_size: 77
hours_to_show: 24
points_per_hour: 4
upper_bound: 4
lower_bound: -4
aggregate_func: avg
show:
extrema: true
legend: false
labels: false
state: true
graph: line
fill: true
color_thresholds_transition: hard
color_thresholds:
- value: -4
color: '#e51f1f'
- value: -0.98
color: '#f2a134'
- value: 0
color: '#44ce1b'
state_map:
- value: above_horizon
label: Day
- value: below_horizon
label: Night
note that i used rgba because i wanted the opacity variable so i set it 0.2, i thought i looked nicer.
the extra addition is the grey block which represents nighttime from sun.sun
my orange section is what i define as normal consumption so i can see when im power positive or not
for my watt consumption vs generation this is my configuration.yaml code
- platform: template
sensors:
greenhousev2_consumption_amps:
friendly_name: 'Consumption Amps'
device_class: current
value_template: >-
{% set b = (states.sensor.greenhousev2_ina219_1_current.state | default(0) ) | float(2) %}
{% set s = (states.sensor.greenhousev2_ina219_2_current.state | default(0) ) | float(2) %}
{{ (s-b) | round(2)}}
greenhousev2_consumption_watts:
friendly_name: 'Consumption Watts'
device_class: power
value_template: >-
{% set b = (states.sensor.greenhousev2_ina219_1_power.state | default(0) ) | float(2) %}
{% set s = (states.sensor.greenhousev2_ina219_2_power.state | default(0) ) | float(2) %}
{{ (s-b) | round(2)}}
I just add this in my cards:
- entity: sensor.zero # zero sensor included in Recorder
name: ' '
color: red # or whatever
show_state: false
show_indicator: false
show_graph: true
show_line: true
show_fill: false
show_points: false
show_legend: false
state_adaptive_color: false
fixed_value: true
aggregate_func: min
1 Like
Hello, someone can give me the name of this color (red and blue) this is not red and not blue :
Thanks you
The ‘red’ looks like salmon and the ‘blue’ looks like dodgerblue
These colors could be hex. Then measure these colors by something like Photoshop.
1 Like
I’d recommend Instant Eyedropper for picking colors for this card; it’s a free, lightweight color picking tool for Windows.
It easily gave me these colors by clicking on the colors in the image (or anywhere on your screen):
Red = #E74C3C
Blue = #3498DB
Orange = #FF9800
Can anybody figure what I’m doing wrong here please? I’m trying to getPreformatted text
To combine in this
But it won’t display correctly as you can see code is:
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: picture-elements
elements:
- type: state-label
entity: sensor.blank_blank
prefix: 'Garden:'
style:
top: 6%
left: 15%
color: rgb(255,255,255)
font-family: Quicksand
font-size: 150%
font-weight: bold
transform: rotate(0deg)
background-color: rgba(0,0,0,.0)
text-shadow: 1px 1px 3px black
border-radius: 0%
text-align: center
tap_action:
action: none
- type: custom:button-card
entity: sensor.lumi_lumi_weather_temperature
show_icon: false
name: Temperature
style:
top: 75%
left: 18%
styles:
card:
- border-style: none
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 95%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff33ff;">
</ha-icon><span style="font-size:80%;">
${states['sensor.lumi_lumi_weather_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:80%; text-align: center;">
${states['sensor.lumi_lumi_weather_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
style:
top: 80%;
left: 80%;
entities:
- entity: sensor.lumi_lumi_weather_temperature
name: Temperature
color: '#ff33ff'
- entity: sensor.lumi_lumi_weather_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 50px;
left: 50px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: icon
icon: mdi:arrow-left-circle
title: ''
tap_action:
haptic: success
action: navigate
navigation_path: Tablet
style:
top: 21%
left: 8%
color: cyan
'--mdc-icon-size': 35px
image: local/images/garden1.png
Can you help ^^ thanks
This is a mini-graph-card thread.
What you posted is a complex card containing different cards.
Tons of code unrelated to mini-graph-card.
And it is not clear what you want to achieve.
Yes, and if you look that complex card contains a mini graph card,
where else am I meant post it in then ? All I asked was any chance could you help, I posted pics of what I wish to achieve you can see what part of the code worked and what I want that said code to do 
It’s the mini graph card that isn’t showing up within the picture elements the custom button card along with it and the rest works fine
Start with removing these “;”
At least it makes the mini-graph-card displayed…
As for other things - cannot simulate everything since my test background image has a different dimension, so all elements are in wrong places(.
Got what I wanted to achieve, turned out the issue was with card mod, spotted you didn’t use card mod so started looking there in my code, thanks for helping.
Actually not.
With this code the card was not displayed at all:
- type: custom:mini-graph-card
style:
top: 80%;
left: 80%;
Test it by yourself.