🚀 Sensor Bar Card Plus • Dynamic sensor visualizations for Home Assistant dashboards

[cdelaet (Chris De Laet)]

Sensor Bar Card Plus

Modern dashboards deserve better sensor bars.

Sensor Bar Card Plus is a heavily redesigned sensor visualization card for Home Assistant dashboards, focused on dynamic data sources, flexible rendering and modern information-dense layouts.

Originally inspired by the Sensor Bar Card concept by TommySharpNZ.

Perfect for:

• energy dashboards
• battery & solar systems
• EV charging
• infrastructure monitoring
• server statistics
• environmental telemetry

---

What Makes It Different?

Sensor Bar Card Plus focuses heavily on:

• dynamic data sources
• dynamic min/max/target entities
• flexible sensor rendering
• compact information presentation
• inline value presentation
• markers and peak indicators
• severity-based coloring
• highly configurable layouts
• flexible sizing and layouts
• modern dashboard styling

The goal is to create dashboards that feel visually structured and information-dense without becoming cluttered.

---

Example YAML

type: custom:sensor-bar-card-plus
title: Energy Overview
label_position: left
label_width: 145
animated: true
entities:
  - entity: sensor.solar_power
    name: Solar
    min: 0
    max: 7000
    color_mode: gradient
    gradient_stops:
      - pos: 0
        color: '#16324f'
      - pos: 65
        color: '#f59e0b'
      - pos: 100
        color: '#fb923c'
    target: 5200
    show_target_label: true

  - entity: sensor.house_consumption
    name: House
    min: 0
    max: 3200
    color_mode: gradient
    gradient_stops:
      - pos: 0
        color: '#2F5BEA'
      - pos: 100
        color: '#6476F7'
    target: 2100
    above_target_color: '#ef4444'

---

Installation

HACS (recommended)

Sensor Bar Card Plus is now available through HACS.

Add directly through HACS:

Link to HACS: Repository – My Home Assistant

(the fancy install badge will be added when I'm no longer a newbie on this forum; for now I'm limited to the link above or you can simply use the github page)

Manual Installation

resources:
  - url: /local/sensor-bar-card-plus.js
    type: module

Full instructions at the Github page below.

---

Credits

Originally inspired by Sensor Bar Card by TommySharpNZ.

---

GitHub

GitHub - cdelaet/sensor-bar-card-plus: Advanced animated sensor visualizations for Home...

[cdelaet (Chris De Laet)]

I'm happy to announce v1.3.0 of Sensor Bar Card Plus. The most requested feature was baseline fill origin support. This means that you can have a bar card with a baseline which is not the minimum value, but rather wherever you want it to be. (Straight in the middle, anyone?)

This is ideal for when you have a sensor such as battery power (charging v discharging) or want to measure grid power (import v export). Checkout the "Home Battery Power" sensor in the screenshot above and compare it with the gif of my original post.

In addition there have been many under-the-skin changes to prepare Sensor Bar Card Plus for even more fun future releases. The showcase dashboards have been enhanced and there's a growing test framework for regression testing. Yep. We're taking seriously. Make sure to follow this thread to stay updated!

I wish you a very enjoyable day,
Chris

[cdelaet (Chris De Laet)]

And v1.3.1 came quickly, because it appeared that SBCP didn't play well with card-mod. It got properly trained and should now be compatible.

Here's a "beautiful" sample of what you can do with Sensor Bar Card Plus and Card Mod. I apologize for the extreme colors. This is only a test, you can actually make it pretty as well, I promise.

[cdelaet (Chris De Laet)]

Big v1.4.0 update for Sensor Bar Card Plus is now live on GitHub and rolling out through HACS.

Replace your old-fashioned HA gauges with a sleek modern, more capable gauge bar.

In addition, this release focused heavily on responsive behavior, semantic rendering, and advanced visualization polish.

New in v1.4.0:
• Needle gauge mode
• Soft bands rendering
• Completely redesigned responsive layout engine
• Better compact dashboard behavior
• Above-target semantic fill rendering
• Shared reveal animation pipeline
• Improved marker layering
• Safari rendering fixes
• Structured configuration expansion
• New showcase dashboards and screenshots

A lot of internal rendering architecture was also reworked to make future features like additional semantic fill regions much easier to implement cleanly.

Would love feedback, screenshots, ideas, and edge cases from real dashboards.

GitHub + HACS release:
v1.4.0 on Github

[cdelaet (Chris De Laet)]

I've release v1.4.1 which only contains documentation and onboarding updates, which were lagging behind a bit due to the many new features and additions to Sensor Bar Card Plus since v1.4.0. The release does not contain any runtime changes.

Available on Github and HACS, as usual.

Added / Updated

• Major README restructuring
• New Rendering Modes section
• Expanded Needle Mode documentation
• New baseline telemetry examples
• Additional needle screenshots for all major fill styles
• New dense telemetry showcase cards
• Improved semantic fill explanations
• Improved migration and configuration guidance
• Refreshed screenshot dashboard
• Updated playground examples
• Improved showcase assets and README imagery

[cdelaet (Chris De Laet)]

A much requested feature, support for the Home Assistant Visual Editor for dashboard, is out!
You can get it in release v1.5.0 via HACS or on my GitHub repo.

Highlights:

• Full structured Visual Editor
• Per-entity override editing
• Gradient and segment preview editors
• Intelligent inheritance behavior
• Advanced target, baseline, peak, and needle configuration
• Responsive editor layouting
• Extensive regression test coverage

The Visual Editor is new in v1.5.0. Please report edge cases or reproduction steps through GitHub Issues.

I'm proud to say that Sensor Bar Card Plus now includes almost 600 unit test and 30 visual regression tests. Those tests have saved my pickle more than once!

Every developer always hopes to deliver quality software which the users are happy to use. I always aim to put a smile on your face.

If you're enjoying Sensor Bar Card Plus (SBCP), give a shout, push the like button, say hi to me and if you hate it, let me know why, and I'll do my utter to make it better.

Checkout my fancy visual gradient composer in the screenshot below. This is only a small part of the SBCP Visual Editor. Have fun making beautiful dashboards!