πŸš€ Sensor Bar Card Plus β€’ Dynamic sensor visualizations for Home Assistant dashboards

:rocket: Sensor Bar Card Plus

hero-showcase-500

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

:sparkles: 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:

(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

6 Likes

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

1 Like

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.

CleanShot 2026-05-28 at 20.31.03

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

hero-400

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

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
1 Like

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!

**Sensor Bar Card Plus v1.6.0 is now available! **

This has turned into the biggest release since the project started. I guess it was a bit more complicated than I anticipated. Thank goodness for those unit tests! They saved my skin more than once.

Highlights

  • New Hero label layout for clean KPI-style dashboards.
  • Responsive improvements for Hero, Above, Left, and Inside label modes.
  • Three Hero size presets.
  • Expanded unit and visual regression test coverage.
  • More comprehensive documentation with new examples and screenshots.
  • Pretty large internal refactor to make future development easier and improve long-term maintainability.

Example of the new hero label layout:

A big thank you to everyone who reported bugs, suggested features, and tested development versions. If you're requested feature isn't implemented yet, don't worry. I keep track of everything!

HACS

Sensor Bar Card Plus is now also included in the official HACS default repositories, so installing and updating the card is now even easier. If you’re using HACS, simply search for Sensor Bar Card Plus in the Frontend section.

Feedback and requests are always welcome. I hope you enjoy the new release. More to come! -Chris

2 Likes

I had to roll back to 1.5. This version throws a config error after updating HA Core today.

1 Like

Release v1.6.1 is out with a hotfix for the HACS installation bug.
I apologise for the inconvenience and having to wait until it was fixed. I was in the car and couldn't start on the fix until I came home half an hour ago.

Should be good now. Let me know if you find and issues or if you have any comments. Thank you for notifying me of the issue.

Hey people. I’ve launched v1.6.3 which contains the dynamic min/max bugfix from v1.6.2 and the improvements listed below. These were based on user-feedback. Thank you and keep them coming!

  • Added configurable Hero value size via layout.hero.value_size
  • Introduced dedicated layout.hero configuration namespace
  • Visual Editor support for the new Hero configuration
  • Improved documentation and configuration reference
  • Changed layout.label.hero_size config into layout.hero.size for better futureness (is that a word?)
  • Full backward compatibility with the now deprecated layout.label.hero_size

This is how a hero label card looks with a value size of 12 up to 112:

1 Like