Lovelace: mini graph card

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.

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

Invalid indentation:

  1. Wrong placement for color_thresholds - is not a property of some entity.
  2. These are not “show” options:
    update_interval: 30
    icon_adaptive_color: true
    name_adaptive_color: true
    points_per_hour: 1

That’s what you thought now, isn’t it?

entities:
  - entity: sensor.teplota_vonk
    show_state: true
hour24: true
name: Venkajsia Teplota
show:
  extrema: true
  labels: true
color_thresholds:
  - value: -10
    color: '#0040ff'
  - value: 0
    color: '#00ffff'
  - value: 10
    color: '#ffcc33'
  - value: 18
    color: '#ffbf00'
  - value: 23
    color: '#ff4000'
type: 'custom:mini-graph-card'

Right
And you can add this:
update_interval: 30
icon_adaptive_color: true
name_adaptive_color: true
points_per_hour: 1
Cannot check it myself but the code seems right.

Thanks for pushing, the line works fine, icon and name working OK

i did try the mini-graph into custom:button-card, however I can’t fit if I turn the name, state or labels as true. Can you fit all the info on such small button?

I could but it becomes a real estate issue.

Another option beside button card may be grid, but real estate becomes an issue.

type: grid
cards:
  - 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
  - type: button
    tap_action:
      action: toggle
    entity: switch.workshop
  - type: button
    tap_action:
      action: toggle
    entity: light.pool_lights

Screen Shot 2021-03-28 at 1.51.16 AM

Here was my original suggestion. Showing the extrema is a challenge. Eventually I added a pop up card to show the detail of the entity. The button image simply gives me a quick visual reference.

      type: 'custom:button-card'
      aspect_ratio: 1/1
      tap_action:
        action: fire-dom-event
        browser_mod:
          command: popup
          title: []
          card:
            !include /config/lovelace/popups/climate_stats.yaml
      custom_fields:
        graph:
          card:
            type: 'custom:mini-graph-card'
            entities: '[[entities]]'
            animate: true
            font_size: 75
            hours_to_show: 48
            line_width: 1
            show:
              extrema: false
              name: true
              icon: true
              state: true
              legend: false
              fill: fade

Screen Shot 2021-03-28 at 1.59.05 AM!

2 Likes

I’m working on a wall tablet that will default to a stock page during market hours, and I’m wondering if anyone has a way to set a variable based on an entity attribute that can be used a color threshold (in this case the prior market close value). I know core HA was supposed to support templates in more places as of a few releases ago but this doesn’t work:

          - type: custom:mini-graph-card
            name: 'amzn'
            icon: mdi:amazon
            hours_to_show: 9
            points_per_hour: 60
            line_width: 1
            color_thresholds:
              - value: 0
                color: red
              - value: "{{ state_attr('yahoofinance.amzn', 'regularMarketPreviousClose') }}" 
                color: var(--accent-color)
            color_thresholds_transition: smooth
            height: 90
            entities: 
              - entity: yahoofinance.amzn

Use config-template-card.

type: vertical-stack
cards:
  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_number.test_number'']'
    entities:
      - '${vars[0].entity_id}'
    card:
      type: vertical-stack
      cards:
        - type: entities
          entities:
            - input_number.test_number
        - type: 'custom:mini-graph-card'
          entities:
            - entity: sensor.cleargrass_1_co2
          hours_to_show: 6
          points_per_hour: 60
          show:
            labels: false
            fill: true
            name_adaptive_color: true
            icon_adaptive_color: true
          color_thresholds_transition: smooth
          font_size: 50
          line_width: 4
          height: 500
          color_thresholds:
            - value: '${parseFloat(vars[0].state) - 100}'
              color: red
            - value: '${parseFloat(vars[0].state) - 75}'
              color: green
            - value: '${parseFloat(vars[0].state) - 50}'
              color: magenta
            - value: '${parseFloat(vars[0].state) - 10}'
              color: cyan
            - value: '${parseFloat(vars[0].state)}'
              color: orange
            - value: '${parseFloat(vars[0].state) + 10}'
              color: violet
            - value: '${parseFloat(vars[0].state) + 75}'
              color: blue
            - value: '${parseFloat(vars[0].state) + 100}'
              color: brown

1 Like

Using the card to display sensors’ change with “Day / Night” as a background graph:
image

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.cleargrass_1_co2
    name: CO2
    color: green
    unit: ''
    show_state: true
    show_indicator: false
    show_graph: true
    show_line: true
    show_fill: true
    show_points: true
    show_legend: false
    state_adaptive_color: false
    fixed_value: false
  - entity: binary_sensor.night
    name: Day/night
    color: 'rgba(50,73,92,0.85)'
    unit: ''
    show_state: false
    show_indicator: false
    show_graph: true
    show_line: false
    show_fill: true
    show_points: false
    show_legend: false
    state_adaptive_color: false
    fixed_value: false
    aggregate_func: min
    y_axis: secondary
name: CO2
hours_to_show: 24
points_per_hour: 60
aggregate_func: last
update_interval: 0
height: 150
line_width: 1
hour24: true
lower_bound: ~400
lower_bound_secondary: ~0
smoothing: false
show:
  name: true
  icon: true
  state: true
  graph: true
  fill: fade
  points: true
  legend: false
  average: false
  extrema: true
  labels: true
  labels_secondary: true
state_map:
  - value: 'off'
    label: '0'
  - value: 'on'
    label: '1'

Recently I realized that the browser is flooded by warnings:


I suspect that this happens since the "state_map" is provided only for one graph.
So this issue - https://github.com/kalkih/mini-graph-card/issues/271 - is more important, it is not just an “improvement”.


Another case - let’s use only ONE graph with state_map like this:

state_map:
  - value: unavailable
    label: Sensor off
  - value: unknown
    label: Sensor off

Even now we have to receive lots of warnings.

So my proposal is:

  • provide "state_map" for all entities;
  • meanwhile DISABLE these warnings.
1 Like

WOW
Could you post the code for this graph?
It’s great looking!!