I’ve got a new idea!
This might require to change the newrly introduced color_threshold to become only threshold (change it to an array for instance)
This way, you can specify a specific icon on a per state.
I do realize while I am writing it that this would make sene only for 1-entity-graph (as for instance, temperature) so to have the thermometer icon to change based on the temperature (I am testing it right now using customize, not sure the mini-graph will follow :P)
Ok now, with my customize I didn’t manage to reach (at least for now) the intended result.
This is the code for now:
sensor.dark_sky_temperature:
templates:
rgb_color: >
if (state > 25) {
return [191,27,0];
} else if (state >= 18 ) {
return [98,158,81];
} else {
return [68,126,188];
}
icon: >
if (state > 25) {
return fac:thermometer-full;
} else if (state >= 20 ) {
return fac:thermometer-three-quarters;
} else if (state >= 15 ) {
return fac:thermometer-half;
} else if (state >= 5 ) {
return fac:thermometer-quarter;
} else {
return thermometer-empty;
}@kalkih Truly fabulous custom card! Request; would love to see the possibility for a bar chart instead of only a line chart. A bar chart makes more sense in especially energy scenarios.
Another great suggestion, this could be a cool feature and would be fairly simple too.
The color_thresholds option is already an array of objects, so this could easily be added.
Renaming the option would probably make sense as you said, but would make this a breaking change, which I try to avoid as much as possible.
If you have a GitHub account (and time) it would be great if you could open issues for these awesome ideas, that way I won’t forget them, and it will be easier to track the progress.
Thanks!
Thank you, and great suggestion.
Support for bar charts is on the radar and is definitely something I want to add in the future.
As you said, there are many scenarios where bar charts make more sense.
Sure thing, Issue opened 
It actually also include an additional feature, the ability to decide which of the entity define the “big number” on the card
I will also open one for the min-max in extrema view (1 line per-entity) and a new one I am thinking right now, which is basically, if you want to see 1 line in extrema, you can define which entity provide the min and which the max
@kalkih I hate to be that guy, because I love the work you put into color_thresholds, but would it be possible to support this new feature and the older line_color_above and line_color_below at the same time?
I understand that supporting both could be more difficult and maybe unwanted, but in some cases it might be nice to still have the ability to color the entire line into a single color to make it standout (e.g. above 30 degrees Celsius would make the entire line completely red to show that it’s really hot).
Ok I got another of my ideas… and this might be crazy to implement 
How about, a second smaller graph that is on the same card but only work for one identity?
When you use this card for Speedtest, you have Download and Upload speeds that are in Mbps, but you also have a ping response time which is in ms.
The graph now will show them as the unit of measurement is the same, therefore the ping might go “higher” than up/down speed… and be confusing…
But, what if you have the big graph on top with up/down speed, and then just below another smalle graph where only the ping graph appear?
Example (using screenshot, so not sure if will be “cool”)
Now, because those are scresnhot is not perfectly clear, but it might give you the idea of what I mean (also, ignore the colors, are coming from different graphs I use for tests )
Let me know your opinion
Cheers
Andrea
bits/s and s are not the same units. So they don’t really belong in the same graph except for when you use a (right-hand-side) second y-axis. (like you can do in grafana)
I know are not the same units, that was exactly my point.
But in some cases, ex Speedtest, it might be sueful and more “clean” to have all those infos related to the same “goal” to be all togheter rather than have two separate graphs.
Can’t you just use a second graph with all of the options off? Which should result in something that resembles your image. If you would place them in a vertical-stack it would look almost like that.
Well not really, that way you will have things messed, here some reasons:
Labels for donwload/upload will be on top of the ping graph
Label for ping will not be there because is a single graph, so no labels in that case (that can actually be a FR itself, add the ability to force the label to be dispalyed )
Min/Max will be not at the same level for the 3 different info.
Hope it clarify
I decided to not keep the old option around because it added too much complexity to the code, at the moment we got three different color options that all have different priorities, adding a potential fourth would be too much imo. Sorry.
I don’t think this will be added, I kind of want to keep this card simple and minimalistic.
As @thmry mentioned, I think by utilizing stacks or even custom cards such as the vertical-style-card + using the show option to hide specific elements in each mini-graph-card you could pretty much achieve this.
Also, labels are actually already available in single entity cards.
I tried already the stack, it comes out quite messed up and you cannot do exactly what I was looking for that way.
Anyway, it’s okay Was worth a try 
Thanks
Andrea
What about hiding the extrema(s), and then do another card (or several) below those two where you hide everything except the extrema?
That was indeed a good idea
The legend is not working tho for some reason
Here the result:
Here the config:
- type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mini-graph-card
name: Speed Test
more_info: false
line_color:
- blue
- lightblue
hour24: true
animate: true
decimals: 1
show:
name: true
icon: true
state: true
graph: true
fill: false
points: false
legend: false
extrema: false
labels: false
entities:
- sensor.speedtest_download
- sensor.speedtest_upload
- type: custom:mini-graph-card
name: Speed Test
more_info: false
line_color: purple
hour24: true
animate: true
decimals: 1
show:
name: false
icon: false
state: false
graph: true
fill: false
points: false
legend: false
extrema: false
labels: false
entities:
- sensor.speedtest_ping
- type: custom:mini-graph-card
name: Speed Test
more_info: false
line_color: purple
hour24: true
animate: true
decimals: 1
show:
name: false
icon: false
state: false
graph: false
fill: false
points: false
legend: true
extrema: true
labels: true
entities:
- sensor.speedtest_download
- sensor.speedtest_upload
- sensor.speedtest_ping
One thing that would be useful to reach the goal at this point would be to be able to define the heigh of the graph so to “compress” the line(s) in a smaller space
Quick note, if on the last graph I enable “graph” than I have the labels, guess that might need a fix
The legend is located inside the graph element, so if you hide the graph, the legend won’t be visible, even if legend is set to true.
In normal use cases, the legend would fill no purpose if the graph was hidden.
There’s the height option already which does exactly this. 
You’ve set labels to true on the last card in the config you posted, set it to false, if you don’t want the labels. It defaults to hover.
Sorry meant the legend actually, not the labels, that’s to be able to see the legend when the graph is disabled, in order to achieve the goal
I also tried with the heigh to 0 and graph true to get the legend to be show, it does but so the graph with default dimensions:)
So now I did set the ping graph to be 25, the one that is there just for legend and extrema to 1 and this is the outcome:
I am close to the expected outcome… if only I can set height to 0 or graph to 0 but still show the legend (or even hide an entity bar even if present in the legend :O)
Thanks for your help
Andrea
Any idea why all of my cards show this orangeish fill if I use thresholds?
Config as below:
entities:
- sensor.temperature_stefan
show:
icon: false
color_thresholds:
- value: 0
color: "#CCE5FF"
- value: 10
color: "#66B2FF"
- value: 18
color: "#0080FF"
- value: 20
color: "#87c087"
- value: 21
color: "#389638"
- value: 24
color: "#FF9932"
- value: 25
color: "#FF8000"
- value: 26
color: "#ff0000"It’s default color I think. Have same effect