Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
1752

Managed by "fill" somehow:

type: vertical-stack
cards:
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
      - entity: sensor.cleargrass_2_co2
    name: CO2
    hours_to_show: 6
    points_per_hour: 60
    show:
      fill: fade
      legend: true
      extrema: true
  - type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.cleargrass_1_co2
      - entity: sensor.cleargrass_2_co2
    name: CO2
    hours_to_show: 6
    points_per_hour: 60
    show:
      fill: false
      legend: true
      extrema: true

image
image458Ɨ689 25 KB

1 Like
1753

You did not post the whole code.
Here is a working code, try to figure out why your code does not work:

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.cleargrass_1_co2
    show_state: true
    show_fill: true
    show_points: false
color_thresholds:
  - value: 450
    color: red
  - value: 500
    color: orange
  - value: 550
    color: yellow
  - value: 600
    color: green
  - value: 650
    color: cyan
  - value: 700
    color: blue
  - value: 750
    color: violet
  - value: 800
    color: black
color_thresholds_transition: hard
name: CO2
hours_to_show: 24
points_per_hour: 60
line_width: 1
show:
  fill: fade
  points: false
  labels: true
height: 200
lower_bound: ~400

image

A common mistake - specifying thresholds and a color for some graph, then the specified color is used instead of thresholds:

image
image905Ɨ268 23.1 KB

1 Like
1754

Great, thanks alot!

1755

Thanks mate, your code really helped. Seemed I had it working I just couldnā€™t see the subtle differences.

Having ā€˜color_thresholds_transition: hardā€™ in there really made the difference!

1756

Great, but with "soft" it may look more natural - you can play with & w/o it, up to you to chooseā€¦

1757

Hi,

I trying to get attribute values to show up in graph, but not working. Need help

type: 'custom:mini-graph-card'
entities:
  - entity: switch.living_room_ac
    name: Current
    attribute: current
  - entity: switch.living_room_ac
    name: Consumption
    attribute: current_consumption
  - entity: switch.living_room_ac
    name: Voltage
    attribute: voltage

chrome_6YyZRh10jn
chrome_6YyZRh10jn1253Ɨ535 26.1 KB

1 Like
1758

What debugging have you done? Are there values for those attributes? Is there historical data?

1759

Attributes are not supported.

1760

@parautenbach I ended up probing attributes to sensor and working fine, Thanks,

I am trying to make three states show up in left, center and right, need help.

chrome_XP0szrlk62
chrome_XP0szrlk621246Ɨ702 46.1 KB 

type: 'custom:mini-graph-card'
name: Master Bedroom Air Conditioner
icon: 'mdi:air-conditioner'
hours_to_show: 12
smoothing: true
entities:
  - entity: sensor.master_bedroom_ac_current_consumption
    name: Consumption
    show_state: true
    align_state: left
  - entity: sensor.master_bedroom_ac_current
    name: Current
    show_state: true
    align_state: center
  - entity: sensor.master_bedroom_ac_voltage
    name: Voltage
    show_state: true
    align_state: rigth
1761

All possible options are provided in the docs:

This is property of the whole graph, not some particular entity.

image
image855Ɨ69 2.55 KB

1762

Any otherway to archive that?

1763

You can use only options provided by the card + some tricks provided by card-mod.
image
Choose any background picture you want - blue, white or whateverā€¦

type: picture-elements
card_mod:
  style: |
    ha-card {
      height: 202px !important;
    }
elements:
  - &ref_card
    type: 'custom:mini-graph-card'
    entities:
      - sensor.cleargrass_1_co2
    show:
      labels: true
      name: false
    align_state: left
    upper_bound: 1000
    lower_bound: ~400
    line_color: green
    line_width: 1
    style:
      top: 0%
      left: 0%
      transform: 'translate(0%,0%)'
    card_mod:
      style: |
        ha-card {
          --ha-card-background: rgba(0,0,0,0);
          width: 492px;
        }
  - <<: *ref_card
    entities:
      - sensor.cleargrass_2_co2
    align_state: center
    line_color: orange
  - <<: *ref_card
    entities:
      - sensor.mijia_300_1_co2
    align_state: right
    line_color: red
image: /local/images/blue.jpg

Update 29.01.22:
The upper solution has one big disadvantage - you need to ā€œhard-codeā€ a width which may cause problems after a window resize.
The new solution is free of this problem:

  - type: custom:mod-card
    card_mod:
      style:
        hui-vertical-stack-card $: |
          div#root {
            display: grid;
          }
          div#root > * {
            grid-column-start: 1;
            grid-row-start: 1;
            margin: 0px;
            --ha-card-background: rgba(0,0,0,0);
          }
    card:
      type: vertical-stack
      cards:
        - type: custom:mini-graph-card
          entities:
            - entity: sensor.cleargrass_1_co2
              state_adaptive_color: true
          show:
            labels: true
            name: false
          align_state: left
          upper_bound: 1000
          lower_bound: ~400
          line_color: green
          line_width: 1
        - type: custom:mini-graph-card
          entities:
            - entity: sensor.cleargrass_2_co2
              state_adaptive_color: true
          show:
            labels: false
            name: false
          align_state: center
          upper_bound: 1000
          lower_bound: ~400
          line_color: orange
          line_width: 1
        - type: custom:mini-graph-card
          entities:
            - entity: sensor.mijia_300_1_co2
              state_adaptive_color: true
          show:
            labels: false
            name: false
          align_state: right
          upper_bound: 1000
          lower_bound: ~400
          line_color: red
          line_width: 1

image

Unfortunately, both 1st & 2nd methods do not allow to display a legend for all graphs; selecting a point of some graph is available for the topmost graph only.

Update 08.09.22:
There is one more method with card-mod - seems to be most advanced:

  - type: custom:mini-graph-card
    entities:
      - entity: sensor.xiaomi_cg_1_temperature
        show_state: true
        name: CG-1
      - entity: sensor.xiaomi_cg_2_temperature
        show_state: true
        name: CG-2
      - entity: sensor.mijia_300_1_temperature
        show_state: true
        name: Mijia-1
    hours_to_show: 6
    points_per_hour: 60
    name: Climate
    show:
      labels: true
      legend: true
    line_width: 1
    card_mod:
      style: |
        .states {
          justify-content: normal !important;
        }
        .state {
          flex-grow: 1;
        }
        .states--secondary {
          flex-flow: row !important;
          flex-grow: 1.2;
          margin-left: 0px !important;
        }
        .states--secondary .state.state--small {
          font-size: unset;
          margin-bottom: unset;
          flex-grow: unset;
        }
        .states--secondary .state.state--small:nth-of-type(2) {
          margin-left: auto !important;
        }

Here a value for "flex-grow: 1.2" must be set dependingly on a displayed 2nd value to place the state closer to the center.
This method is the only way to display a legend and see a state for some point!
image

2 Likes
1764

Hi there,
Iā€™m looking for an advise on how to change the color of the state based on the value. Here is my custom:mini-graph-card button, and Iā€™m trying to achieve this:

  • if the download speed is less than 63 Mbit/s color RED, if is =< 70 color ORANGE and above 70 color green.
    download_button

here is the code for the button, and I tried to play with the style option for ha-card .states.flex but that messes with the outcome of the card.

        - name: Download
          type: 'custom:mini-graph-card'
          icon: mdi:cloud-download-outline
          view_layout:
            grid-row: 3 / 4
            grid-column: 1 / 3
          entities:
            - entity: sensor.speedtest_download
              show_state: true
              color: green
              show_points: false
              name: Download
            - entity: sensor.speedtest_ping
              show_state: true
              y_axis: secondary
              show_graph: false
          style: |
            ha-card {
              transform: scale(1,1);
              height: 95%;
              width: 98%;
              margin: -0px;
              background-color: rgba(10,10,10,0.9);
              border: solid 1.15px rgba(50,50,50,0.9);
              box-shadow: 0px 0px 3px 0.5px #2D2F32;
              border-radius: 10px;
            }
            ha-card .header.flex .name.flex { 
              margin-left: 0px;
              margin-top: -10px;
              font-family: Helvetica;
              font-size: 15px;
            }
            ha-card .header.flex .icon {
              --mdc-icon-size: 25px;
              margin-top: -10px;
              color: rgb(169, 169, 169);
            }
            ha-card .states.flex {
                margin-left: 0px;
                margin-top: -20px;
                {% if states('sensor.speedtest_download')|float >= 61}
                  color: magenta !important;
                {% else %}
                  color: green !important;
                {% endif %}
            }
            ha-card .info.flex .info__item .info__item__type {
              display: none;
            }
            ha-card .info.flex .info__item .info__item__value {
              font-size: 10px;
              margin-top: -13px;
            }
            ha-card .info.flex .info__item .info__item__time {
              display: none;
            }
            ha-card .graph .graph__container {
              margin-top: -10px;
            }
            ha-card .states.flex .states--secondary {
              color: blue;
            }
          line_width: 1
          align_icon: name
          font_size: 50
          group: false
          group_by: hour
          hours_to_show: 24
          points_per_hour: 60
          fill: fade
          height: 75
          lower_bound: 50
          smoothing: false
          show:
            icon: true
            legend: false
            name: true
            state: true
            labels: false
            labels_secondary: true
            graph: line
            extrema: true

can you advise?
Thanks!

1765

I prepared a thread dedicated to simplify & unify creation of graphs based on "mini-graph-card" & "history-graph".
The thread is located here.
A small description is provided below.

Annotation:
The topic is dedicated to people who like the "mini-graph-card" and is going to keep using it.
The post describes using the "decluttering-card" to simplify creating & managing graphs based on the "mini-graph-card".

Intro:
While developing my HA setup very very soon a number of graphs in my system became about 10ā€¦20 - and it was just a beginning.
I wanted to have one style for all my graphs. Any time I wanted to correct something in "mini-graph-card" cards (common settings like styling, aggregate_func, "card-mod" styling etc), I had to repeat the same correction for every graph.
Also, I desperately needed a possibility to manage graphs - like changing "hours_to_show", switching on/off "show_points", "show_extrema" etc.
Finally, I needed two more features:

  • displaying a background graph like ā€œDay / nightā€, ā€œAvailable / unavailableā€ etc;
  • displaying a zero X-axis.

Examples:

image

image

4 Likes
1767

Hi all, is it possible to change font size only for the extrema?

1 Like
1768

Possible with card-mod, search in the topic

1769

whyyyyyyyy? its in the www folder (latest version 10), in the Lovelace>Resources as /local/mini-graph-card.js?v=0.10.0

Custom element doesnā€™t exist: mini-graph-card.

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.plex_bandwidth
    name: Plex Bandwidth
hours_to_show: 72
1770

Is there any chance that fire-dom-event will ever be supported as a tap-action on this card?
Iā€™m really missing it.

I use it to display the underlying entities of a graph which only shows the averageor the entities that are used in a template sensor which is being graphed. (I hope that makes sense)

1771

Sorry, could you explain once again with detail (+some example) what you want to achieve?

1772

For example, I have a ā€˜Brightnessā€™ graph based on a sensor:
image

When I tap on it Iā€™d like to show the data that was used to calculate the sensor. this used to workā€¦

        tap_action:
          action: call-service
          service: browser_mod.popup
          service_data:
            title: Brightness Sensor Values
            card:
              type: entities
              entities:
                - sensor.elevation
                - entity: sensor.openweathermap_cloud_coverage
                  name: OpenWeatherMap Cloud Coverage
                - sensor.period_of_day
            deviceID:
              - this

Iā€™ve been away from HA for a few months and have some catching up to do - many things have changed :slight_smile: one of those things is browser_mod.