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 variable from HA or set a color value (eg. #FFFFFF)
ulm_card_graph_name Set graph name
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 variable from HA or set a color value (eg. #FFFFFF)
ulm_card_graph_type fill This is to change the appearance 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.
ulm_card_graph_group_by interval Specify type of grouping of data, dynamic interval, date or hour.
ulm_card_graph_line_width 5 Set the thickness of the line.

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
      ulm_card_graph_group_by: interval
      ulm_card_graph_line_width: 5
Template Code
card_graph.yaml
---
### Card Graph ###
card_graph:
  template:
    - "extended_card"
  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"
    ulm_card_graph_group_by: "interval"
    ulm_card_graph_line_width: 5
    ulm_card_graph_icon_color: ""
  triggers_update:
    - "[[[ return variables.ulm_card_graph_entity2 ]]]"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "card_generic"
        variables:
          ulm_card_generic_icon: "[[[ return variables.ulm_card_graph_icon; ]]]"
          ulm_card_generic_name: "[[[ return variables.ulm_card_graph_name; ]]]"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              custom_fields:
                item1:
                  card:
                    type: "custom:button-card"
                    styles:
                      icon:
                        - color: >
                            [[[
                              var color = variables.ulm_card_graph_icon_color;
                              if (variables.ulm_card_graph_icon_color){
                                return 'rgba(var(--color-' + color + '),1)';
                              }
                              return 'rgba(var(--color-theme),0.2)';
                            ]]]
                      img_cell:
                        - background-color: >
                            [[[
                              var color = variables.ulm_card_graph_icon_color;
                              if (variables.ulm_card_graph_icon_color){
                                return 'rgba(var(--color-' + color + '),0.2)';
                              }
                              return 'rgba(var(--color-theme),0.05)';
                            ]]]
    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; ]]]"
        group_by: "[[[ return variables.ulm_card_graph_group_by; ]]]"
        line_width: "[[[ return variables.ulm_card_graph_line_width; ]]]"
        style: |
          ha-card {
            box-shadow: none;
            border-radius: var(--border-radius);
          }