Lovelace: mini graph card

What do you want to animate exactly?

Sorry, you are right, I didn’t specify what I needed.

In the official doc of this card, there is animate.
If this option is set on true, it add a reveal animation to the graph.

Due to the fact i’m using some very small graphs, this animation appears like a “page lag” instead of a smooth animation.

So, i wonder if there is a way to modify the speed or the duration of this animation.

I think there is no such an option.
You can play with card-mod:

type: custom:mini-graph-card
entities:
  - entity: sensor.cleargrass_1_pm25
    show_points: false
points_per_hour: 60
hours_to_show: 1
animate: true
card_mod:
  style: |
    .graph .graph__container .graph__container__svg svg g mask .line {
      animation-duration: 5s !important;
      animation-delay: 0s !important;
      animation-timing-function: linear !important;
      animation-iteration-count: infinite !important;
    }

Note that the default animation only runs when showing the graph the first time (i.e. after opening the web page). The "animation-iteration-count: infinite" option makes the animation running in loop.
Also, in case of "infinite" after several loops the animation effect breaks (possibly Chrome bug) - see this at the end of this video:
Untitled Project


More about card-mod.

4 Likes

Thank you so much! I will try that!

Hello, have you any idea why the color threshold is weirly apply on my card (the last one):

I insert it within a grid card with a 1:1 ratio.

I want to show bar of energy consumption per day as primary series, and a line curve showing price per day as overlay for the same day.

This is the entity data I have but not sure how that can be used in the mini graph card on my dashboard. Anyone who can help me out a bit?

image

hourly:
  - time: '02:00'
    usage: '0.806'
  - time: '03:00'
    usage: '0.567'
  - time: '04:00'
    usage: '0.749'
  - time: '05:00'
    usage: '0.79'
  - time: '06:00'
    usage: '0.739'
  - time: '07:00'
    usage: '0.714'
  - time: '08:00'
    usage: '0.637'
  - time: '09:00'
    usage: '0.846'
  - time: '10:00'
    usage: '1.132'
  - time: '11:00'
    usage: '1.017'
  - time: '12:00'
    usage: '1.686'
  - time: '13:00'
    usage: '1.003'
  - time: '14:00'
    usage: '1.085'
  - time: '15:00'
    usage: '1.099'
  - time: '16:00'
    usage: '0.921'
  - time: '17:00'
    usage: '1.86'
  - time: '18:00'
    usage: '1.354'
  - time: '19:00'
    usage: '0.943'
  - time: '20:00'
    usage: '1.625'
  - time: '21:00'
    usage: '0.79'
  - time: '22:00'
    usage: '0.852'
  - time: '23:00'
    usage: '0.806'
  - time: '00:00'
    usage: '0.964'
  - time: '01:00'
    usage: '1.89'
days:
  - date: Sep 19 2021
    usage: '0.682'
  - date: Sep 18 2021
    usage: '24.875'
  - date: Sep 17 2021
    usage: '24.147'
  - date: Sep 16 2021
    usage: '20.565'
  - date: Sep 15 2021
    usage: '16.55'
  - date: Sep 14 2021
    usage: '22.994'
  - date: Sep 13 2021
    usage: '22.789'
unit_of_measurement: kWh
friendly_name: Greenely Usage
icon: mdi:power-socket-eu

I have tried this, but it does not provide me what I want not even with the one series to visualize consumption per day:

type: custom:mini-graph-card
entities:
  - entity: sensor.greenely_usage
    name: Energy consumption
    hours_to_show: 168
    aggregate_func: max
    group_by: date
    show:
      graph: bar

Hello people. Could someone help me to make this graphic look better? I have the problem that if the temperature is maintained, for example, as seen in the photo at the same temperature, only one line remains below and it looks bad. How can I get it to another height? Thank you

You could set some bounds.

      - type: custom:mini-graph-card
        name: UV
        icon: mdi:weather-sunny-alert
        entities:
          - entity: sensor.openweathermap_uv_index
            name: UV Index
        lower_bound: 0

Check the docs for more related options.

Thanks for answering.
I checked the documentation but didn’t find anything that would do what I need. I tried various things but they didn’t work for me.
Add lower_bound: 0 and it looks like this

                card:
                  type: "custom:mini-graph-card"
                  entities:
                    - sensor.temperatura_plantado
                  color_thresholds:
                    - color: "#007BFE"
                      value: 28.0
                    - color: "#26fe00"
                      value: 28.5
                    - color: "#FF5733"
                      value: 28.8
                    - color: "#fe0000"
                      value: 29.3
                  lower_bound: 0
                  line_color: blue
                  line_width: 6
                  height: 170
                  hours_to_show: 24
                  points_per_hour: 0.5
                  show:
                    name: false
                    icon: false
                    state: false

Create a graph with a stock history graph card and see if it shows a constant value.

Also, this:

   - color: "#FF5733"
     value: 28.8
...
line_color: blue

You should not specify a "line_color" proprty.

Thanks. There I did not explain it well. The card shows the information well, but if it stays at the same temperature during the day, it shows the constant temperature well below and it seems that there is no graph

image

What I want is that if the temperature remains linear, it shows the graph a little higher and not at the bottom of the card.

Set lower_bound and upper_bound to values that fit. Going with your example data I’d try 26 or 27 up to 29 or 30.

That should set a height for the graph and your line is in the middle of the range. :slight_smile:

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

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

Use:

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

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.