Ok, but after many hours and without any refresh i still get the same result. What to do to force the real data shown?
The Button Card solves this with standard CSS from the css-tricks site. It is a copy/paste if I look at the CSS and supporting code.
If I look at many requests for this card btw, I wonder why ppl donāt use CSS to get this card modified:
I have in this screenshot:
- Info at the top, with only the max value displayed
- graph as second
- state as third
- and the header last
I might have other goals though with a mobile first design: less information, decluttering my display:
As opposed to people that want as many extra information as possible on this mini-graph-card!
which is very nice indeed! Would be really helpful for me if you could share the code you use. Have puzzled with these css settings myself on the button-card too much to be looking forward to do it again on the graph cardā¦
if you would kick start me on the mini graph card, that would be much appreciated ā¦
I could probably just use some custom CSS, that is true. Iād rather not customize every single card that I have though. I would rather just use a cards options and not customize it too much.
But I agree, this is probably the easiest way. I havenāt looked into it yet, but Iāll probably do it in that way.
Well, here you go. Iām using a MODIFIED mini-graph-card, so it MIGHT be that you canāt set the graph on order: 2 without some software modifications (canāt remember now what I did btw).
I have a lot of modified cards as I like to modify the looks from a themeā¦
card:
type: 'custom:mini-graph-card'
# Set styling from theme. Fonts are still hard-coded...
style: |
ha-card {
--primary-background-color: var(--theme-graph-card-color) ;
--paper-item-icon-color: var(--theme-graph-icon-color);
--primary-text-color: var(--theme-graph-text-color);
color: var(--theme-graph-text-color);
font-weight: bold ;
font-family: Helvetica ;
box-shadow: var(--theme-card-box-shadow);
letter-spacing: 0.25em;
}
.graph__container {
margin: 0px 10px 10px 10px;
}
.info {
order: 1;
}
.states {
order: 3;
}
.header {
order: 4;
align-self: center;
}
.info__item__type, .info__item__time {
display: none;
}
.info__item:first-child .info__item__value {
display: none;
}
.graph {
order: 2;
align-self: flex-start;
display: inherit;
}You get the first graph btw with these settingsā¦
Iām using decluttering cards for all the formatting and have barely any settings in the views itself. Iām using yaml mode for Lovelace because of the includes and lots of decluttering templates.
And last but not least: a big theme with lots of settings, so I can style about any lovelace card. At least the cards I use of course 
You can see parts of my work here:
How do I go about adding
average: true
extrema: true
Properties for a mini graph composed of multiple entities? It only shows that info for first one. I havenāt been able to figure it out how to display it for all entities.
Hereās my code:
- type: custom:mini-graph-card
name: Speed Test
points_per_hour: 3
hours_to_show: 24
icon: mdi:speedometer
entities:
- entity: sensor.usg_speedtest_down
name: Download
color: blue
y_axis: secondary
- entity: sensor.usg_speedtest_up
name: Upload
color: green
y_axis: secondary
show:
average: true
extrema: true
labels: true
labels_secondary: true
Itās not currently possible.
But thereās a feature request open for it on github.
https://github.com/kalkih/mini-graph-card/issues/51
Iām trying to make a card showing rain the last 7 days.
I would like 1 bar per day.
Iāve managed to do this:
with the following code, `
type: ācustom:mini-graph-cardā
- entities:
- entity: sensor.netatmo_public_data_sum_rain_24
name: Regn
show:
graph: bar
hours_to_show: 168
but I would like one bar per day. Is that possible? Or is it somethingwrong with the indata?
Not currently possible, thereās a feature request open for it:
I have strange issue with mini-graph-card on my desktop (Opera and Chrome). Itās hard to explain this issue so I recorded a screen https://www.youtube.com/watch?v=6wLUlPdg3W4
HA 0.97.x/0.98.x
mini graph card 1.3.0 (via HACS)
My config for this view:
- id: climate
icon: mdi:cloud
title: 'Klimat'
path: climate
panel: true
cards:
- type: custom:layout-card
max_columns: 4
column_width: 290
cards:
- type: vertical-stack
cards:
- type: custom:dark-sky-weather-card
entity_sun: sun.sun
entity_daily_summary: sensor.dark_sky_daily_summary
entity_current_conditions: sensor.dark_sky_icon
entity_humidity: sensor.humidity_outdoor
entity_pressure: sensor.pressure_outdoor
entity_temperature: sensor.temperature_outdoor
entity_apparent_temp: sensor.dark_sky_apparent_temperature
entity_visibility: sensor.dark_sky_visibility
entity_wind_bearing: sensor.dark_sky_wind_bearing
entity_wind_speed: sensor.dark_sky_wind_speed
entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1d
entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2d
entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3d
entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4d
entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5d
entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_1d
entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_2d
entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_3d
entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_4d
entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_5d
entity_forecast_icon_1: sensor.dark_sky_icon_1d
entity_forecast_icon_2: sensor.dark_sky_icon_2d
entity_forecast_icon_3: sensor.dark_sky_icon_3d
entity_forecast_icon_4: sensor.dark_sky_icon_4d
entity_forecast_icon_5: sensor.dark_sky_icon_5d
entity_summary_1: sensor.dark_sky_summary_1d
entity_summary_2: sensor.dark_sky_summary_2d
entity_summary_3: sensor.dark_sky_summary_3d
entity_summary_4: sensor.dark_sky_summary_4d
entity_summary_5: sensor.dark_sky_summary_5d
entity_pop_1: sensor.dark_sky_precip_probability_1d
entity_pop_2: sensor.dark_sky_precip_probability_2d
entity_pop_3: sensor.dark_sky_precip_probability_3d
entity_pop_4: sensor.dark_sky_precip_probability_4d
entity_pop_5: sensor.dark_sky_precip_probability_5d
time_format: 24
locale: pl
tooltips: true
tooltip_width: 100
tooltip_bg_color: '#FAFAFA'
tooltip_fg_color: '#212121'
tooltip_border_color: '#D9D9D9'
tooltip_left_offset: -14
- type: iframe
url: https://embed.windy.com/embed2.html?lat=52.101&lon=19.948&zoom=11&location=coordinates&metricWind=m%2Fs
aspect_ratio: 56%
- type: sensor
entity: sensor.airly_info
- type: vertical-stack
cards:
- type: custom:mini-graph-card
hour24: true
decimals: 1
align_header: left
align_icon: left
points_per_hour: 1
show:
labels: true
entities:
- sensor.temperature_outdoor
line_color: '#ff6384'
- type: custom:mini-graph-card
hour24: true
decimals: 1
align_header: left
align_icon: left
points_per_hour: 1
show:
labels: true
entities:
- sensor.humidity_outdoor
line_color: '#36a2eb'
- type: custom:mini-graph-card
hour24: true
decimals: 0
align_header: left
align_icon: left
points_per_hour: 1
show:
labels: true
entities:
- sensor.pressure_outdoor
line_color: '#4bc0c0'
- type: vertical-stack
cards:
- type: custom:mini-graph-card
hour24: true
decimals: 1
align_header: left
align_icon: left
points_per_hour: 1
show:
labels: true
entities:
- sensor.temperature_indoor
line_color: '#ff6384'
- type: custom:mini-graph-card
hour24: true
decimals: 1
align_header: left
align_icon: left
points_per_hour: 1
show:
labels: true
entities:
- sensor.humidity_indoor
line_color: '#36a2eb'
- type: custom:mini-graph-card
hour24: true
decimals: 0
align_header: left
align_icon: left
points_per_hour: 1
show:
labels: true
entities:
- sensor.co2_salon
line_color: '#ffce57'
- type: vertical-stack
cards:
- type: custom:mini-graph-card
hour24: true
decimals: 0
align_header: left
align_icon: left
points_per_hour: 1
show:
labels: true
entities:
- sensor.airly_pm1
line_color: '#78909c'
- type: custom:mini-graph-card
hour24: true
decimals: 0
align_header: left
align_icon: left
points_per_hour: 1
show:
labels: true
entities:
- sensor.airly_pm2_5
line_color: '#78909c'
- type: custom:mini-graph-card
hour24: true
decimals: 0
align_header: left
align_icon: left
points_per_hour: 1
show:
labels: true
entities:
- sensor.airly_pm10
line_color: '#78909c'
Any solution for that?
Something is most likely resizing -> making your last card (down to the left) overflow the viewport which adds a scrollbar to the view.
Itās hard to tell what it could be, specifically in a nested config. From the video, it seems like it also happens when you hover on the right of the top bar?
1st of all, thanks @kalkih for an excellent card. But i having problem to make it transparent background as iām using transparent theme from https://techleech.com/2019/04/11/diy-smart-home-bonus-content-home-assistant-theme/
try used https://github.com/thomasloven/lovelace-card-mod for still no luck to make those white card into transparent.
any help will be much appreciate. thanks
one of my code,
entities:
- color: Aqua
entity: sensor.humidity_158d0001b1c4c1
name: Dry Box
- entity: sensor.humidity_158d0001b1c4a8
name: Kitchen
name: Humidity
type: 'custom:mini-graph-card'
try to add
style: |
ha-card {
background: rgba(150,150,150,0.2);
}
But nothing happen.
Hey.
You could try adding !important at the end of the CSS rule.
But you should be able to skip card-mod and just set ha-card-background in your theme I believe, or if that doesnāt work try setting paper-card-background-color.
Thanks for the tips. Am i in the right direction ? tested all, no error but still canāt get the background turn to transparent. I try color to red for testing purpose also canāt change the color. it just stay white.
That should go in your theme, not card config.
Iām using transparent theme. both ha-card-background & paper-card-background-color already on rgba(150, 150, 150, 0.1)
All default cards display as transparent except custom cards & Alarm.
Just double checked, and I have no issues making it transparent through the theme variable. ha-card-background.
The card respects the default theme variables such as ha-card-background & ha-border-radius.
Try updating the card or HA, or if you recently made changes to your theme you may need to restart for them to apply.
1 Like
oh man ! you are right ! it was my mistake that did not aware the theme was not auto select after reboot ! resolved after select back the theme.
thanks for your effort 
1 Like
Great to hear you solved it, happy to help! 
Hi
I a m trying to setup a mini graph with temperatures.
Unfortunately my temps belong to a climate device not a sensor.
So i cannot use then in the card.
I tried extracting the attribute via a template sensor but it seems just true sensors cann be used.
Does anybody ha ve a suggestion to solve th is?
Ty