Skip to content

Graph Card

Description

example-image

The card_graph shows an entity with the actual state and a min-graph-card integrated. This can be used for a thermostat to show the actual temperature and the history. It now supports dual graphs as well as bar style graphs.

Variables

Variable Default Required Notes
entity Your entity_id for the temperature sensor
ulm_card_graph_color This is to adjust your color value. Use a CSS varible from HA or set a color value (eg. #FFFFFF)
ulm_card_graph_name Enable background
ulm_card_graph_icon Set custom icon
ulm_card_graph_entity Your entity_id for the temperature sensor
ulm_card_graph_entity2 Your entity_id for the second temperature sensor
ulm_card_graph_color2 This is to adjust your color value of the second graph. Use a CSS varible from HA or set a color value (eg. #FFFFFF)
ulm_card_graph_type fill This is to change the appearence of the graph. Default is fill, but line, bar are valid options.
ulm_card_graph_hours 24 How much time should the graph cover, default is 24 hours.
ulm_card_graph_points 0.5 Specify amount of data points the graph should display for each hour. A larger number results in a more detailed graph.

Usage

  - type: 'custom:button-card'
    template: card_graph
    entity: sensor.livingroom_temperature
    variables:
      ulm_card_graph_color: "var(--google-blue)"
      ulm_card_graph_name: Temperature Livingroom
      ulm_card_graph_entity: sensor.livingroom_temperature
      ulm_card_graph_color2: "var(--google-green)"
      ulm_card_graph_entity2: sensor.bedgroom_temperature
      ulm_card_graph_type: fill
      ulm_card_graph_hours: 24
Template Code
card_graph.yaml
---
### Card Graph ###
card_graph:
  variables:
    ulm_card_graph_color: "var(--info-color)"
    ulm_card_graph_name: "[[[ return entity.attributes.friendly_name; ]]]"
    ulm_card_graph_icon: "[[[ return entity.attributes.icon ]]]"
    ulm_card_graph_color2: "var(--info-color)"
    ulm_card_graph_entity2: ""
    ulm_card_graph_hours: 24
    ulm_card_graph_type: "fill"
    ulm_card_graph_points: "0.5"
  show_icon: false
  show_name: false
  show_label: false
  triggers_update: "all"
  styles:
    grid:
      - grid-template-areas: "'item1' 'item2'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content  min-content"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "0px"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "card_generic"
        styles:
          card:
            - box-shadow: "none"
            - border-radius: "var(--border-radius) var(--border-radius) 0px 0px"
            - padding: "12px"
        entity: "[[[ return entity.entity_id ]]]"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              template:
                - "icon_more_info"
              custom_fields:
                item1:
                  card:
                    type: "custom:button-card"
                    entity: "[[[ return entity.entity_id ]]]"
                    icon: "[[[ return variables.ulm_card_graph_icon; ]]]"
                item2:
                  card:
                    type: "custom:button-card"
                    entity: "[[[ return entity.entity_id ]]]"
                    label: "[[[ return variables.ulm_card_graph_name ]]]"
    item2:
      card:
        type: "custom:mini-graph-card"
        entities: >
          [[[
            var ent = [];
            ent.push(variables.ulm_card_graph_entity);
            if(variables.ulm_card_graph_entity2 != "")
              ent.push(variables.ulm_card_graph_entity2);
            return ent;
          ]]]
        line_color: >
          [[[
            var col = [];
            col.push(variables.ulm_card_graph_color);
            if(variables.ulm_card_graph_color2 != "")
              col.push(variables.ulm_card_graph_color2);
            return col;
          ]]]
        show:
          name: false
          icon: false
          legend: false
          state: false
          graph: "[[[ return variables.ulm_card_graph_type=='fill'?'line':variables.ulm_card_graph_type; ]]]"
          fill: "[[[ return variables.ulm_card_graph_type=='fill'?true:false; ]]]"
        hours_to_show: "[[[ return variables.ulm_card_graph_hours; ]]]"
        points_per_hour: "[[[ return variables.ulm_card_graph_points; ]]]"
        style: |
          ha-card {
            box-shadow: none;
            border-radius: var(--border-radius);
          }