Lovelace: mini graph card

Tried that it didn’t work.

I’d like to do this as well, but someone asked above in the string (in 4/20) and the response was that it’s not possible without using another custom card type that allows you to define Jinja2 templates anywhere in Lovelace.

It works for me:

Hmm… Maybe it’s my other card that is messing things up, will test and see.

OK it works, was my other card that was blocking it plus I found there is a min height that this card can handle.

I’ve the same issue, so also looking for a solution.

Worked it out:

type: 'custom:mini-graph-card'
name: Daily Energy Used
icon: 'hass:flash'
show:
  graph: bar
hours_to_show: 168
aggregate_func: max
group_by: date
entities:
  - entity: sensor.daily_energy_peak
    name: Energy

Wondering why its not part of the HA core. Super popular card! Looks like only lack of UI config form stops from being part of HA and more popularity.

ABSOLUTELY love the card…awesome beyond all belief. I do have one question as
I am using it from my pool and spa temperatures when they are running.
When one or both are not running the state of the sensor is unknown.
Using the state_map I stated the value of unknown the label would be Pool Off
or for Spa it would be Spa Off. Is there a way to hide or blank the unit when
using this state_map method. He is how it currently looks for me…

PoolSpaOff

I would like to not see the F for Fahrenheit when using the state_map.

Thanks SO much in advance!!!

Use card-mod:

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
style: |
  ha-card .states.flex .state .state__uom.ellipsis {
    {% if states('sensor.cleargrass_1_temp') in ['unavailable','unknown'] %}
      display: none;
    {% endif %}
  }
state_map:
  - value: "unavailable"
    label: Sensor off
  - value: "unknown"
    label: Sensor off

изображение
изображение

More about using card-mod:

AWESOME!!!
Worked like a charm. Thank you SO much for your help on this.

First, thanks for this great card.

One question i am struggling with: i want to create a card which shows two values (temp and humidity).
How do i need to configure to show BOTH of the current values?
The state only shows the first one (in my case temp).

Thanks, Ralf

Thanks for the fast reply. Got it.

My code - mybe helps the next one searching for this:

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.tfa_ts34c_cresta_35_0e_temperature
    color: green
    show_state: true
    show_points: false
    name: Temperatur
  - entity: sensor.tfa_ts34c_cresta_35_0e_humidity
    color: blue
    show_state: true
    show_points: false
    y_axis: secondary
    name: Luftfeuchtigkeit
    hours_to_show: 24
    points_per_hour: 60
    line_width: 3
    show:
      labels: true
labels_secondary: true
line_width: 2
height: 65
lower_bound: 0
font_size: 70
name: Keller
show:
  name: false
  icon: false
  legend: false

/ Ralf

1 . Wrong placement. These data must relate to both sensors.
2 . You will never see these "name: Luftfeuchtigkeit" & "name: Temperatur" - because "legend: false", "show_points: false".
3 . You will never see this "name: Keller" - because "name: false".
4 . May be it is better to have "lower_bound: ~0" instead of "lower_bound: 0".

Thanks for these tips!

/ Ralf

Animated elements by using card-mod.

Blinking state for “unavailable” and “unknown” values:
Note that the same method may be used for other values.
1111
изображение
Three styles are here:

  • colored & blinking state
  • hidden unit
type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
style: |
  ha-card .states.flex .state .state__uom.ellipsis {
    {% if states('sensor.cleargrass_1_temp') in ['unavailable','unknown'] %}
      display: none;
    {% endif %}
  }
  ha-card .states.flex .state .state__value.ellipsis {
    {% if states('sensor.cleargrass_1_temp') in ['unavailable','unknown'] %}
      color: red;
      animation: blinking 0.5s linear alternate infinite !important;
    {% endif %}
  }
  @keyframes blinking {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }
state_map:
  - value: unavailable
    label: Sensor off
  - value: unknown
    label: Sensor off

Resized & rotating icon:
The rotation speed may depend on the sensor’s value (could be a wind speed, fan speed etc).
In this example the sensor is an "input_number" entity. Change it’s value and see how the rotation speed changes.
Sorry for a video quality…
aaa

type: vertical-stack
cards:
  - type: markdown
    content: |
      colored icon
      rotating icon
      resized icon
    style: 'ha-card { color: red; }'
  - type: entities
    entities:
      - entity: input_number.servicewithhistory_value
        icon: 'mdi:fan'
        name: Fan speed
    style:
      hui-input-number-entity-row:
        $:
          hui-generic-entity-row:
            $:
              state-badge:
                $:
                  ha-icon:
                    $: |
                      ha-svg-icon {
                        color: orange;
                        animation:
                          {% if states('input_number.servicewithhistory_value')|int <= 250|int -%}
                          rotation 4s
                          {%- elif states('input_number.servicewithhistory_value')|int > 250|int and states('input_number.servicewithhistory_value')|int <= 500|int -%}
                          rotation 2s
                          {%- elif states('input_number.servicewithhistory_value')|int > 500|int and states('input_number.servicewithhistory_value')|int <= 750|int -%}
                          rotation 1s
                          {%- else -%}
                          rotation 0.3s
                          {%- endif %}
                          linear infinite;
                      }
                      @keyframes rotation {
                        0% {
                          transform: rotate(0deg);
                        }
                        100% {
                          transform: rotate(360deg);
                        }
                      }
  - type: 'custom:mini-graph-card'
    entities:
      - entity: input_number.servicewithhistory_value
        name: "Service: value"
    hours_to_show: 1
    points_per_hour: 60
    icon: 'mdi:fan'
    style:
      .header.flex .icon ha-icon:
        $: |
          ha-svg-icon {
            --mdc-icon-size: 60px;
            fill: orange;
            animation:
              {% if states('input_number.servicewithhistory_value')|int <= 250|int -%}
              rotation 4s
              {%- elif states('input_number.servicewithhistory_value')|int > 250|int and states('input_number.servicewithhistory_value')|int <= 500|int -%}
              rotation 2s
              {%- elif states('input_number.servicewithhistory_value')|int > 500|int and states('input_number.servicewithhistory_value')|int <= 750|int -%}
              rotation 1s
              {%- else -%}
              rotation 0.3s
              {%- endif %}
              linear infinite;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }

Find more card-mod examples.

9 Likes

I have an issue with my mini-graph card. No matter what I do I can’t work it out. What I’m trying to achieve is to have the size of the graph card same as the rest of my buttons. I partially achieved this when I defined the height and width in the style for the card. However, when I set to SHOW the name, labels or state (set to TRUE), than whole card expand (enlarge). Can anyone advise me how to prevent this? How to display Name and the statte with the graph on the small card?

Here is how it looks the enlarged card (the height of the card is bigger than other buttons):
mini_graph

and here is my code:

              cards:
                - type: 'custom:card-modder'
                  card:
                    type: 'custom:mini-graph-card'
                    entities:
                      - entity: sensor.speedtest_download
                        show_state: true
                      - entity: sensor.speedtest_upload
                        show_state: true
                    style: |
                        ha-card {
                          transform: scale(1.0);
                          height: 95%;
                          border-radius: 10px;
                          width: 98%;
                          margin: -0px;
                          padding-top: 0px;
                          background-color: rgba(10,10,10,0.9);
                          border: solid 1.4px rgba(50,50,50,0.9);
                          box-shadow: 0px 0px 3px 0.5px #2D2F32;
                          text-shadow: 1px 1px 1px block;
                        }
                    line_width: 2
                    align_icon: state
                    font_size: 50
                    group: false
                    group_by: hour
                    hours_to_show: 48
                    fill: fade
                    show:
                      icon: true
                      legend: false
                      name: true
                      state: true
                      labels: false
                      graph: line
                      points: false
                      extrema: true

I could never get mini graph to an aspect ratio of 1/1. I ended wrapping mini graph into a button card using custom fields.

Sorry for the code photo. I’m on my phone

Hi to all,
can anyone please advise me on setup? Somehow I can’t display colors by temperature. I still have the same color chart.
The configuration is below. thank you in advance for your help

obrazek

entities:
  - color_thresholds:
      - value: -10
        color: '#0040ff'
      - value: 0
        color: '#00ffff'
      - value: 10
        color: '#ffcc33'
      - value: 18
        color: '#ffbf00'
      - value: 23
        color: '#ff4000'
    entity: sensor.teplomer_venkovni_temperature
    show_state: true
hour24: true
name: Venkovní teplota
hours_to_show: 336
show:
  extrema: true
  labels: true
  points: false
  update_interval: 30
  icon_adaptive_color: true
  name_adaptive_color: true
  points_per_hour: 1
type: 'custom:mini-graph-card'