Lovelace: mini graph card

Now it looks better but I had to put values very close to what the aquarium has. Aquarium temperatures remain between 28.3 and 28.8
What if it exceeds those temperatures?

   lower_bound: 28.3
   upper_bound: 28.8

somebody could you help me with a way/solution/approach to use Style in my (several) custom mini-graph items contained inside of a horizontal-stack?


I have been able to do it with each mini-graph, but I want to check if it is possible to use a general style code to all mini-graph inside of horizontal stack



   lower_bound: ~28.3
   upper_bound: ~28.8

What do you want to style?
Check if there is a solution here.

Thanks… I m using it for each mini-graph, but I would like use one Style code for all mini-graph’s contained in the same horizontal stack, maybe thiking in avoid re-write same code for each of those mini-graphs

For vertical, rewrite it for horizontal:

type: custom:mod-card
          $: |
            .states.flex .state .state__value.ellipsis {
              color: orange;
            .states.flex .state .state__uom.ellipsis {
              color: cyan;
            .header.flex .name.flex {
              color: magenta;
            .header.flex .icon {
              color: red;
  type: vertical-stack
    - type: custom:mini-graph-card
        - sensor.cleargrass_1_temp
    - type: custom:mini-graph-card
        - sensor.cleargrass_1_temp
    - type: custom:mini-graph-card
        - sensor.cleargrass_1_temp

oohhh, ok, maybe this should be the approach that I require use and not trying to add style directly to horizontal/vertical stack, thanks let me test it,

Card-mod cannot be applied to the stack directly - you should insert the stack into mod-card.

I am very new to HomeAssistant and just playing around to get familiar with it. I like these charts and have set up one for a Kasa Switch with monitoring that controls my coffee machine. The chart shows current W. There are two things I was wanted if it was possible.

  1. Can I use the tap-action function to get the tap to toggle the switch? Below is what I have tried.
type: custom:mini-graph-card
name: Coffee Machine
  - entity: sensor.coffee_machine_current_consumption
    name: Current
hours_to_show: 5
points_per_hour: 10
updated_interval: 5
animate: true
  action: call-service
  service: switch.toggle
  entity_id: switch.coffee_machine
more_info: false

Currently when I click it the More Infor still shows up

  1. I was wandering if there was a way to change the Unit of Measure to KW?


Thanks bro, it worked excellent, thanks for show me how it works and also for help me to learn about the CCS path use…

do you know where I can find information about how to use “config.entity” option to manipulate the mini-graph-card’s a this level, I have tried several ways and examples that I found but I have not been able to use in my code, and it looks or maybe I have not see any documentation repository about the use of “config.entity”

Thanks in advance

I do not think that config.entity works with mini-graph-card.

The only card I know, that works with that is the markdown-card.

At least, config.entity works here:
Entities card
Entity card
multiple-entity-row (for the main entity)


Wow, didn’t know that, thanks! :slight_smile: :+1: I should try the standard-cards from HA sometimes… :rofl: :rofl:

Use value_factor: 1000 to multiply (never used by myself, just read in the docs).
Then use unit: kW to display the new unit.

Thanks for the post. The unit: setting worked but for some reason value_factor does not work. I will have to go back through the document to see what I am missing.

Thanks again

Random question, I am struggling to see if there is an answer to my weird question,

I am using the graph card t show the last price of a stock from a day over the last 7 days, one thing I am wondering is, is it possible to set the colour thresholds based on the previous days last value?

type: custom:mini-graph-card
name: Stock Price - Last 7 Days
icon: hass:currency-usd
  - sensor.yahoofinance_stock
aggregate_func: last
group_by: date
hour24: false
hours_to_show: 168
  extrema: true
  icon: true
  graph: bar
  name: true
  name_adaptive_color: true
  icon_adaptive_color: true

It is.

  1. Use config:template-card to set thresholds (there was my post here about it, find it) dependingly on some sensor.my_last_value.
  2. Create the my_last_value template sensor (you should find out how to set it). Possibly by automation: run it at 23:59 (dependingly on how often the data updated) every day to save the last value. Kind of: trigger=sensor changed, condition=time>23:00.

where I can find documentation to learn how to create the path used in Style code/configuration, for example: how to cascade the style to “hui-masory-view” → “colums” (div id=“columns”) → “column” (div class=“column”)

I suppose exist something to learn, right?
Thanks in advance

Hey there,

i want to display two sensors (temperature and humidity) with this card.

For tap_action I want to open the more-info dialog of a third entity (climate).

I tried this code - but nothing happens when tapping. Could you experts help me?

      - type: custom:mini-graph-card
          - action: more-info
            entity: climate.heizung_wohnzimmer
          - sensor.heizung_wohnzimmer_temperature
          - entity: sensor.heizung_wohnzimmer_humidity
            show_state: true
            show_line: false
            show_fill: false
            show_legend: false
            y_axis: secondary