Skip to content

✨ New Features & πŸ› Bug fixes

Choose a tag to compare

@cataseven cataseven released this 20 Jun 14:32
6228ca3

⭐ Support

If you like this card, feel free to ⭐ star the project on GitHub and share it with the Home Assistant community or

Buy Me a Coffee

✨ New Chart Mode: Gauge

gauges

A brand-new chart mode β€” a needle dial per entity, laid out in a column grid. Each entity gets its own dial, so you can mix ranges, colors, and thresholds freely in a single card.

  • Arc = the value range seen in the period β€” it fills from the period minimum β†’ maximum (e.g. a day that ranged 24–30 on a 0–30 dial), not a fill-from-zero bar.
  • Needle = the live value (current HA state; falls back to the last data point when there's no live state).
  • Dial scale comes from each entity's lower_bound / upper_bound (default 0–100, relabeled Gauge Range β†’ Min / Max in the editor).
  • Color thresholds paint the dial β€” the band and faint background zones follow color_thresholds; enabling Last Color collapses the whole dial to a single color taken from the current value.
  • needle_color per entity β€” threshold, any CSS color, or empty to follow the value color.
  • Hover tooltip shows the current value plus the period Peak and Low; gauge_show_minmax labels the two dial ends.

New card options: gauge_columns, gauge_span (90–360Β°, default 270), gauge_value_position (below / above), gauge_value_size, gauge_show_minmax.

2026-06-20 17_07_11-Greenshot image editor 2026-06-20 17_07_49-Greenshot image editor
type: custom:statistics-graph-chart-card
show_legend: true
tooltip_match_axis: false
height: auto
gauge_columns: 2
gauge_value_position: above
gauge_span: 180
gauge_show_minmax: true
chart_mode: gauge
entities:
  - entity: sensor.temperature_2
    color: "#378ADD"
    upper_bound: "28"
    lower_bound: "0"
    color_thresholds:
      enabled: true
      values:
        - value: 0
          color: "#47fff3"
        - value: 10
          color: "#47afff"
        - value: 15
          color: "#eaff47"
        - value: 20
          color: "#f47e10"
        - value: 25
          color: "#ff4757"
      direction: vertical
  - entity: sensor.temperature_3
    color: "#2ecc71"
    upper_bound: "28"
    lower_bound: "18"
annotations: []

Distinct from the existing show_state: "gauge" state-row display β€” this is the full chart mode, selectable from the chart-mode dropdown.

πŸ₯§ "%" Secondary Value (#260)

Pie, Ranking, and Polar Area now offer a % option for Secondary Value in the state row β€” it shows each entity's share of the total, matching the percentages drawn on the chart. Set per entity with show_second_state_as: pct (or pick % in the editor's Secondary Value dropdown).

2026-06-20 14_33_26-Downloads - File Explorer

πŸ› Bug fixes

  • The Date Navigation tab (date picker + Energy date sync) is now available in every chart mode, not just time-based / grid modes β€” so gauge, pie, ranking, etc. can use date navigation too.

Bug fix for #254


For those who did not updated to v3.14 yet

v3.14

✨ New features

πŸ”¦ Period highlight on bar charts

When you hover a bar, the background of that whole period is now shaded, so it is easy to see where each period begins and ends. This is especially helpful with multiple entities drawn side by side, where the small gaps between adjacent periods otherwise make boundaries hard to read.

  • New period_highlight option (off by default).
  • New period_highlight_color option to set the band color. It accepts any CSS color (hex, rgba, name) or variable; leave it empty for a subtle theme grey. You can also theme it globally with the --sgc-period-highlight-color CSS variable.
  • Available in the visual editor (Tooltip section) and in YAML.
  • Works whether or not the tooltip itself is enabled.
type: custom:statistics-graph-chart-card
period_highlight: true
period_highlight_color: rgba(128,128,128,0.3)
graph_type: bar
group_by: date
entities:
  - sensor.garage_temp
  - sensor.kids_room_temp
  - sensor.living_room_temp
image

πŸš₯ Dynamic color thresholds with entity references

Color threshold rows now accept entity references for both the value and the color. Use sensor.x for an entity's state, or sensor.x.attribute for one of its attributes. This lets thresholds follow other sensors (for example a seasonal or dynamic target) instead of being fixed numbers.

template:
  - sensor:
      - name: Seasonal Thresholds
        state: "{{ now().month }}"
        attributes:
          t1: "{{ 12 if now().month in [12,1,2] else 30 if now().month in [6,7,8] else 22 }}"
          t2: "{{ 8  if now().month in [12,1,2] else 25 if now().month in [6,7,8] else 16 }}"
          t3: "{{ 3  if now().month in [12,1,2] else 18 if now().month in [6,7,8] else 10 }}"
          t4: "{{ 0  if now().month in [12,1,2] else 12 if now().month in [6,7,8] else 5  }}"
          c1: "#e74c3c"
          c2: "#f39c12"
          c3: "#2ecc71"
          c4: "#3498db"
type: custom:statistics-graph-chart-card
show_x_ticks: true
animate_graph: true
show_pph_picker: true
show_group_by_picker: true
hours_to_show: 240
tooltip_match_axis: false
tooltip_order: default
height: 300
y_axis_decimals: 0
x_grid_style: dashed
y_grid_style: dashed
show_date_picker: true
date_picker_default_mode: day
date_picker_modes:
  - last_30d
entities:
  - entity: sensor.temperature
    name: Outside temperature
    color: "#378ADD"
    line_width: 1.5
    points_per_hour: 5
    color_thresholds:
      enabled: true
      values:
        - value: sensor.seasonal_thresholds.t1
          color: sensor.seasonal_thresholds.c1
        - value: sensor.seasonal_thresholds.t2
          color: sensor.seasonal_thresholds.c2
        - value: sensor.seasonal_thresholds.t3
          color: sensor.seasonal_thresholds.c3
        - value: sensor.seasonal_thresholds.t4
          color: sensor.seasonal_thresholds.c4
    tap_action:
      action: more-info
      entity: automation.device_camera_recording
annotations: []

🎬 Improvements

πŸŒƒ Bar chart animation

animate_graph now animates bar charts as well: bars grow up from the baseline when the chart renders. Previously only line charts animated.

animate

πŸ› Bug fixes

Line draw-in gaps and 7-day LTS display

Incorrect aggregation with group by date or week

State row value for offset series

Tooltip markers on multi-entity bar charts


⭐ Support

If you like this card, feel free to ⭐ star the project on GitHub and share it with the Home Assistant community or

Buy Me a Coffee