Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
1886

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

Sin título
Sin título511×550 47.6 KB

1887

Hi
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?

image

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

image

1888

Use:

   lower_bound: ~28.3
   upper_bound: ~28.8
1889

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

1890

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

1891

For vertical, rewrite it for horizontal:

type: custom:mod-card
card_mod:
  style:
    hui-vertical-stack-card:
      $:
        mini-graph-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;
            }
card:
  type: vertical-stack
  cards:
    - type: custom:mini-graph-card
      entities:
        - sensor.cleargrass_1_temp
    - type: custom:mini-graph-card
      entities:
        - sensor.cleargrass_1_temp
    - type: custom:mini-graph-card
      entities:
        - sensor.cleargrass_1_temp

image
image465×642 20 KB

1892

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,

1893

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

1894

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
entities:
  - entity: sensor.coffee_machine_current_consumption
    name: Current
hours_to_show: 5
points_per_hour: 10
updated_interval: 5
animate: true
tap-action:
  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?
1895

Ildar_Gabdullin

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

1 Like
1896

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

1897

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

1898

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

2 Likes
1899

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

1900

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

1901

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

1902

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
entities:
  - sensor.yahoofinance_stock
aggregate_func: last
group_by: date
hour24: false
hours_to_show: 168
show:
  extrema: true
  icon: true
  graph: bar
  name: true
  name_adaptive_color: true
  icon_adaptive_color: true
1903

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.
1904

Guys
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
image

1905

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
        tap_action:
          - action: more-info
            entity: climate.heizung_wohnzimmer
        entities:
          - sensor.heizung_wohnzimmer_temperature
          - entity: sensor.heizung_wohnzimmer_humidity
            show_state: true
            show_line: false
            show_fill: false
            show_legend: false
            y_axis: secondary