Is there any way to have a graph where the fill colour is different from the line colour? For example, I’d like to have a graph where the line colour is black and the fill colour is a shade of white like this mockup:
Sure, use card-mod and do something like:
# ...rest of card config
style: |
.line--fill {
fill: black; # color of the fill
stroke: black; # color of the fill
}
Thanks, that partly works but the colour doesn’t come out right because it seems it has a predefined opacity set and even adding opacity: 1; to the style doesn’t change this. This means that setting the fill to white just makes it a lighter shade of grey than the background so it doesn’t stand out.
style: |
.line--fill {
fill: red;
stroke: red;
animation: 0 !important;
opacity: 1 !important;
}
Many thanks, that did the trick. 
I had actually tried the !important after the opacity, but it seems that the animation messes it up, with the anomation set to 0 like that it looks just like I wanted.
1 Like
Great, quick explanation; the element has an animation & animation fill-mode set to forwards, which makes the element retain the style values from the last keyframe of the animation.
Hi,
Is it possible to add these horizontal dotted lines to the mini graph?
I think it makes it easier to see which value the graph represent.
See the image below for an example…
Why does the icon show the wrong colour for graph: line but not for graph: bar?
This is my config (using graph: line)
- type: custom:mini-graph-card
icon: mdi:white-balance-sunny
entities:
- entity: sensor.brightness
decimals: 0
points_per_hour: 2
indicator: off
align_icon: left
align_header: left
align_state: left
font_size: 70
more_info: false
animate: true
hour24: true
color_thresholds:
- value: 0
color: 'black'
- value: 1
color: 'grey'
- value: 15
color: 'yellow'
show:
fill: true
extrema: false
labels: hover
graph: line
icon_adaptive_color: true
And it gives me
but with graph: bar it gives me
Also the line seems to be the wrong colour when zero, it should be black. Interestingly when I hover the mouse it is correct.
Sure, grab card-mod and do something like this:
...rest of mini-graph-card config
style: |
.graph {
border-top: 1px dotted grey;
}
From release v0.4.3
BREAKING CHANGES
- Color thresholds now only support colors specified in hex format
Pssst… You can still use other color formats for color_thresholds in bar charts since they don’t require any kind of color interpolation 
2 Likes
So what am I still doing wrong?
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
icon: mdi:white-balance-sunny
entities:
- entity: sensor.brightness
decimals: 0
points_per_hour: 2
indicator: off
align_icon: left
align_header: left
align_state: left
font_size: 70
more_info: false
animate: true
hour24: true
color_thresholds:
- value: 0
color: '#000000' # Black
- value: 1
color: '#808080' # Grey
- value: 15
color: '#FFFF00' # Yellow
show:
fill: true
extrema: false
labels: hover
graph: line
icon_adaptive_color: true
1 Like
Good catch, that’s a bug, I’ve addressed it now.
https://github.com/kalkih/mini-graph-card/commit/851edfca8f904e1e78cb54a3c1e817fb43659ec7
In the meantime set the lowest threshold value to -1 instead of 0, should avoid the issue!
1 Like
Sure, you can already kinda adjust the card height with the built-in height option, that option does however only apply to the graph section of the card.
To set a fixed card width/height, grab card-mod and do something like this:
...rest of mini-graph-card config
style: |
ha-card {
height: 400px;
width: 200px;
}
Thank you!
I’d like to create a button-like graph card for my dashboard but the result is not 100% 
:
animate: true
entities:
- entity: sensor.mi_t_4c65a8d1fd82
name: hőmérséklet
font_size: 80
show_indicator: false
hour24: true
height: 100
hours_to_show: 24
icon: 'mdi:sofa'
name: nappali
show:
legend: true
graph: line
style: |
ha-card {
--ha-card-background: 'rgba(250,0,20,0.8)';
background-image: url("/local/pictures/cardback.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: cover;
background-position: center;
border: solid 1.5px rgba(57,128,228);
border-radius: 15px;
box-shadow: none;
height: 135px;
width: 135px;
}
type: 'custom:mini-graph-card'
Maybe I’ve reached the minimum size limit because of the basic structure of the card.
Shouldn’t be a minimum height, it will just start clipping UI elements.
The issue here is the wrapping inside the horizontal stack, could be solved with:
style: |
ha-card {
height: 135px;
width: 135px;
}
:host {
display: block !important;
}
I was messing around with the bar graphs but I couldn’t get to the desired output. I think the card does not support but let me ask it just to be sure.
I have a utility meter sensor to measure my water usage. The history graph just shows the number of liters that have been spent in total for the given day at the given hour.
However, what I would like to show on a bar graph is the amount of liters used within a given timeframe (e.g. 1 hour). So you would have 24 bars if you want to show 1 day and instead of aggregating, you show how much got added to the total in that given hour. Am I making sense to you? More like a kind of histogram. Would this be possible without additional sensor templates?
Sorry I’m not 100% sure I understand what you’re after.
Can’t that already be done by setting up the utility meter and use hourly as cycle?
Aggregate functions (min, max, avg) are coming in the next release of this card, which you would kinda need for this setup to work properly since the default right now is average.
I got square shape if I set the height to smaller value at this size.
`style: |
ha-card {
height: 115px;
width: 135px;
}
:host {
display: block !important;
}`
The double sized square (270px, 270px) is working without the “:host” attribute too.
There’s a 10px padding top, which adds to the height.
So, setting the height to 125px should technically result in a perfect square in your case, althought it might not actually look like it because of how our brain perceive things (vertical-horizontal illusion).
2 Likes
Here’s an image that hopefully shows what I mean:
basically, graphing the water (daily) utility sensor, it shows an accumulated value for the day, rather than the number of liters used in a given hour (e.g. from 7am to 8am).
I didn’t think of adding an additional sensor that has hourly as cycle, I’ll give it a try