A Home Assistant Gauge Card with extended functions and options.
The Extended Gauge Card is inspired by the Home Assistant Gauge Card but offers additional options, such as displaying minimum and maximum values, an unlimited number of segments with lower and upper bounds, display of threshold values, and more.
- UI-based configuration for easy setup.
- Backward compatibility with YAML configuration.
- Shows minimum and maximum value.
- Individually configurable segments, each with a lower and upper bound, a color, and a replacement value.
- Unlimited number of segments.
- Shows values of segment bounds.
- Shows with or without a needle.
This is the recommended installation method.
- Search for and install the Extended Gauge Card from HACS.
- Hard restart the browser by pressing ctrl-F5.
- Download the .js file from the latest release.
- Copy the file into the /config/www folder of your Home Assistant installation. If the www folder does not exist, create it.
- In Home assistant got to Settings / Dashboards, press the three dots at the top right of the window and select resources.
- Click on Add resource and enter /local/extended-gauge.js, then click on Create.
- Hard restart the browser by pressing ctrl-F5.
After installing your Extended Gauge Card, edit your dashboard or create a new one. Add the Extended Gauge Card and configure it.
| Field name | Description |
|---|---|
| Entity | First, you need to select an entity that contains the numeric value you want to display. As long as no entity is selected, demo values will be shown and will update every 5 seconds. |
| Title | If you want the card to have a title, you can enter it in this field. |
| Minimum displayed value | The value at which the gauge display begins. |
| Maximum displayed value | The value at which the gauge display ends. |
| Color for value display | The default background color when the needle is shown, or the color of the current value display if the needle is hidden. |
| Background color (no value) | The default background color when the needle is shown, or the color of the current value display if the needle is hidden. |
| Show needle | Toggle to show or hide the needle. |
| Show entity name | Toggle to show or hide the entity name below the value. |
| Show min / max values | Toggle to show or hide the gauge’s minimum and maximum values. |
| Show segment thresholds | Toggle to show or hide the segment threshold values. |
To gain more control over how the entity value is displayed, click the edit button to the right of the selected entity Id.
| Field name | Description |
|---|---|
| Name | Give your entity a custom name. This name will be displayed below the value instead of the entity Id. |
| Unit of measurement | The unit that should be displayed next to the value. |
| Conversion factor | The value provided by the entity will be divided by this number. For example, if the entity provides power in watts, entering a conversion factor of 1000 will display the value in kilowatts. |
| Number of decimals | The number of decimal places to be displayed. |
| Thousands separator | The character to be used as the thousands separator. |
| Decimal separator | The character to be used as the decimal separator. |
Add segments with threshold values to your gauge to highlight specific value ranges. Click “Add segment” or the plus icon to add a new segment. You can add as many segments as you like, but adding too many may reduce the gauge’s readability.
| Field name | Description |
|---|---|
| Title | The title or name of the segment. This is not displayed and is for your reference only. To avoid confusion about the purpose of each segment when multiple segments are used, you can only add a new segment after you have given a name to the previous one. |
| Lower bound | The lower bound of the segment. If not specified, the gauge's minimum value will be used by default. |
| Upper bound | The upper bound of the segment. If not specified, the gauge's maximum value will be used by default. |
| Segment color | The color in which the segment should be displayed. |
| Override value | A text that will be shown instead of the entity’s value when it falls within the segment bounds. |
The Extended Gauge Card is published under the GNU General Public License v3.0.
This card is inspired by the Home Assistant Gauge Card.
If this Home Assistant card is useful to you, please consider supporting this project. Sponsorship helps keep the project going, improve features, and fix any issues that arise. Your contribution goes a long way in making the project better for everyone.
