{"id":27714814,"url":"https://github.com/benjamin-dcs/gauge-card-pro","last_synced_at":"2026-03-14T18:28:17.173Z","repository":{"id":287168263,"uuid":"963750120","full_name":"benjamin-dcs/gauge-card-pro","owner":"benjamin-dcs","description":"Build beautiful Gauge cards using 🌈 gradients and πŸ› οΈ templates","archived":false,"fork":false,"pushed_at":"2026-02-05T11:25:57.000Z","size":1343,"stargazers_count":229,"open_issues_count":9,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-05T22:18:15.455Z","etag":null,"topics":["card","gauge","gradient","home-assistant","lovelace","lovelace-custom-card","templates"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benjamin-dcs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["benjamin-dcs"],"buy_me_a_coffee":"benjamindcs"}},"created_at":"2025-04-10T06:42:55.000Z","updated_at":"2026-02-05T22:17:03.000Z","dependencies_parsed_at":"2026-01-16T08:03:58.256Z","dependency_job_id":null,"html_url":"https://github.com/benjamin-dcs/gauge-card-pro","commit_stats":null,"previous_names":["benjamin-dcs/gauge-card-pro"],"tags_count":67,"template":false,"template_full_name":null,"purl":"pkg:github/benjamin-dcs/gauge-card-pro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamin-dcs%2Fgauge-card-pro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamin-dcs%2Fgauge-card-pro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamin-dcs%2Fgauge-card-pro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamin-dcs%2Fgauge-card-pro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benjamin-dcs","download_url":"https://codeload.github.com/benjamin-dcs/gauge-card-pro/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamin-dcs%2Fgauge-card-pro/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29194010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T07:37:03.739Z","status":"ssl_error","status_checked_at":"2026-02-07T07:37:03.029Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["card","gauge","gradient","home-assistant","lovelace","lovelace-custom-card","templates"],"created_at":"2025-04-27T00:58:50.706Z","updated_at":"2026-03-07T10:11:26.604Z","avatar_url":"https://github.com/benjamin-dcs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/benjamin-dcs","https://buymeacoffee.com/benjamindcs","https://www.buymeacoffee.com/benjamindcs"],"categories":[],"sub_categories":[],"readme":"# Gauge Card Pro\n\n### Build beautiful Gauge cards using 🌈 gradients and πŸ› οΈ templates!\n\n͍\n\n\u003e [!NOTE]\n\u003e Need help with your configuration? Checkout my official [Gauge Card Pro Assistant](https://chatgpt.com/g/g-698c7177f22481919cb8260f05134f25-gauge-card-pro-assistant)!\n\n## Description\n\nInspired by the idea to be able to recreate the Home Assistant native Energy Gauge Cards I created `Gauge Card Pro`. Built on top of the Home Assistant [Gauge card](https://www.home-assistant.io/dashboards/gauge/), but with many more features and beautiful look-and-feel!\n\n- 🌈 Native gradient support for `segments`\n- ✌️ Two gauges in one\n- πŸ› οΈ Use templates for the majority of the fields\n- ↔ Ability to start `severity` gauges from the center\n- ✨ Additional icon indicators next to the gauge\n- πŸͺ› Several styling options\n- 🎨 Every element in the card can have its colour defined. This can be a single colour or two colours for light- or darkmode. Of course, allows templating!\n- πŸ‘¬ Set `value` and `value_text` independently\n- πŸ‘€ Two labels underneath the gauge\n- 🎨 Automatic color interpolation for `severity` gauges\n- πŸ˜Άβ€πŸŒ«οΈ Native ability to hide the background\n\n\u003cimg width=\"1326\" height=\"1178\" alt=\"image\" src=\"https://github.com/user-attachments/assets/c343c9a1-d6b1-4910-9cb2-cd46ecb2d586\" /\u003e\n\n## Support This Project\n\nIf you find **Gauge Card Pro** useful, consider supporting its development:\n\n[![Buy Me a Coffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge\u0026logo=buy-me-a-coffee\u0026logoColor=black)](https://www.buymeacoffee.com/benjamindcs)\n[![GitHub Sponsors](https://img.shields.io/badge/Sponsor%20on%20GitHub-30363d?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/sponsors/benjamin-dcs)\n\n## Table of contents\n\n- [Configuration variables](#configuration-variables)\n - [Min/Max Indicator Configuration variables](#minmax-indicator-configuration-variables)\n - [Inner Gauge Configuration variables](#inner-gauge-configuration-variables)\n - [Setpoint Configuration variables](#setpoint-configuration-variables)\n - [Titles Configuration variables](#titles-configuration-variables)\n - [Value-Texts Configuration variables](#value-texts-configuration-variables)\n - [Icon Configuration variables](#icon-configuration-variables)\n - [Icon Template object](#icon-template-object)\n - [Shapes Configuration variables](#shapes-configuration-variables)\n - [Features Configuration variables](#features-configuration-variables)\n - [Custom styling options](#custom-styling-options)\n\n- [YAML structure - Showing is as possible and/or typical usage](#yaml-structure---showing-is-as-possible-andor-typical-usage)\n- [ΒΉ Color examples](#1-color-examples)\n - [Fixed single value](#fixed-single-value)\n - [Single template value](#single-template-value)\n - [Light/Dark Mode fixed values](#lightdark-mode-fixed-values)\n - [Light/Dark Mode template values](#lightdark-mode-template-values)\n- [Β² `segments` examples](#2-segments-examples)\n - [Fixed list with from](#fixed-list-with-from)\n - [Fixed list with pos](#fixed-list-with-pos)\n - [Template list](#template-list)\n- [Difference between `from` and `pos` segments](#difference-between-from-and-pos-segments)\n- [Installation](#installation)\n - [Install via HACS (recommended)](#install-via-hacs-recommended)\n - [Manual](#manual)\n - [Translations](#translations)\n- [Credits](#credits)\n\n\u003c/details\u003e\n\n## Configuration variables\n\n\u003e [!IMPORTANT]\n\u003e When using the Visual Editor to clear/empty one of the following fields, there is some yaml-code left which prevents the default values from working:\n\u003e\n\u003e - `primary`\n\u003e - `primary_unit`\n\u003e - `secondary`\n\u003e - `secondary_unit`\n\u003e\n\u003e Delete the line entirely from your yaml-code to restore the default functionality for these fields\n\n| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |\n| :--------------------------------------- | :-------------------------------------------------------------------- | :-------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------- |\n| `type` | string | | `custom:gauge-card-pro` | |\n| `header` | string | | Header of the card | |\n| `entity` | string | Optional | Entity for main-gauge value, templates, actions and features (e.g.: `{{ states(entity) }}`) | |\n| `entity2` | string | Optional | Entity for inner-gauge value, and templates (e.g.: `{{ states(entity2) }}`) | |\n| `inner` | [inner object](#inner-gauge-configuration-variables) | | Configuration for the inner gauge. Use `inner: {}` to use all defaults for the inner gauge | |\n| `attribute` | string | Optional | Attribute of `entity` to use for main-gauge value | |\n| `min` | number | 0 | Minimum value for graph | βœ”οΈ (only templatable in code-editor/yaml) |\n| `max` | number | 100 | Maximum value for graph | βœ”οΈ (only templatable in code-editor/yaml) |\n| `needle` | boolean | `false` | Show the gauge as a needle gauge | |\n| `needle_color` | [string or map\u003csup\u003e5\u003c/sup\u003e](#1-color-examples) | `var(--primary-text-color)` | Color of the needle | βœ”οΈ |\n| `segments` | [list\u003csup\u003e6\u003c/sup\u003e](#2-segments-examples) | Optional | List of colors and their corresponding start values | βœ”οΈ |\n| `severity_centered` | boolean | Optional | Severity gauge (requires disabled needle) start at the center | |\n| `severity_color_mode` | string | `basic` | Sets the mode to determine/render the color of the value of a severity gauge. | |\n| | | | β€’ `basic`: Color determined based on `segments` | |\n| | | | β€’ `interpolation`: Color determined based on `segments`, interpolated between segment positions | |\n| | | | β€’ `gradient`: Show part of the gradient-arc as value | |\n| `gradient` | boolean | `false` | Shows segments as a gradient (requires needle) | |\n| `gradient_background` | boolean | `false` | Shows the background as a gradient for severity gauge (requires disabled needle) | |\n| `gradient_resolution` | string or number | `auto` | Level of detail for the gradient. Must be `auto` or a number indicating the amount of segments to create | |\n| `min_indicator` | [min/max indicator object](#minmax-indicator-configuration-variables) | | Configuration of the min indicator | |\n| `max_indicator` | [min/max indicator object](#minmax-indicator-configuration-variables) | | Configuration of the max indicator | |\n| `setpoint` | [setpoint object](#setpoint-configuration-variables) | | Configuration for the setpoint needle | |\n| `round` | string | `off` | Rounds the ends of the gauge. Valid values are `off`, `full`, `medium` and `small` |\n| `titles` | [titles object](#titles-configuration-variables) | | Configuration for the titles beneath the gauge | |\n| `value_texts` | [value_texts object](#value-texts-configuration-variables) | | Configuration for the value texts inside the gauge | |\n| `icons` | [icons object](#icons-configuration-variables) | | Configuration for the icons | |\n| `hide_background` | boolean | `false` | Hides the background and border of the card | |\n| `shapes` | [shapes object](#shapes-configuration-variables) | | Configuration of the shapes several elements | |\n| `value` | template | state of `entity` | Value for graph | βœ”οΈ (only available in code-editor/yaml) |\n| `entity_id` | string or list | Optional | Only reacts to the state changes of these entities. This can be used if the automatic analysis fails to find all relevant entities | |\n| **ACTIONS** | | | | |\n| `tap_action` | action | `more-info` | Home assistant action to perform on tap. See [official documentation](https://www.home-assistant.io/dashboards/actions/#tap-action) for more info | |\n| `hold_action` | action | `none` | Home assistant action to perform on hold. See [official documentation](https://www.home-assistant.io/dashboards/actions/#hold-action) for more info | |\n| `double_tap_action` | action | `none` | Home assistant action to perform on double_tap. See [official documentation](https://www.home-assistant.io/dashboards/actions/#double-tap-action) for more info | |\n| `primary_value_text_tap_action` | action | `more-info` | Home assistant action to perform on tap on the primary value-text. See [official documentation](https://www.home-assistant.io/dashboards/actions/#tap-action) for more info | |\n| `primary_value_text_hold_action` | action | `none` | Home assistant action to perform on hold on the primary value-text. See [official documentation](https://www.home-assistant.io/dashboards/actions/#hold-action) for more info | |\n| `primary_value_text_double_tap_action` | action | `none` | Home assistant action to perform on double_tap on the primary value-text. See [official documentation](https://www.home-assistant.io/dashboards/actions/#double-tap-action) for more info | |\n| `secondary_value_text_tap_action` | action | `more-info` | Home assistant action to perform on tap on the secondary value-text. See [official documentation](https://www.home-assistant.io/dashboards/actions/#tap-action) for more info | |\n| `secondary_value_text_hold_action` | action | `none` | Home assistant action to perform on hold on the secondary value-text. See [official documentation](https://www.home-assistant.io/dashboards/actions/#hold-action) for more info | |\n| `secondary_value_text_double_tap_action` | action | `none` | Home assistant action to perform on double_tap on the secondary value-text. See [official documentation](https://www.home-assistant.io/dashboards/actions/#double-tap-action) for more info | |\n| `icon_tap_action` | action | `more-info` | Home assistant action to perform on tap on the icon. See [official documentation](https://www.home-assistant.io/dashboards/actions/#tap-action) for more info | |\n| `icon_hold_action` | action | `none` | Home assistant action to perform on hold on the icon. See [official documentation](https://www.home-assistant.io/dashboards/actions/#hold-action) for more info | |\n| `icon_double_tap_action` | action | `none` | Home assistant action to perform on double_tap on the icon. See [official documentation](https://www.home-assistant.io/dashboards/actions/#double-tap-action) for more info | |\n| **FEATURES** | | | | |\n| `feature_entity` | string | | Entity used for features and (optional) HVAC icons. If not set `entity` will be used | |\n| `features` | [features object](#features-configuration-variables) | | Configuration of the additional features | |\n\n### Inner Gauge Configuration variables\n\n| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |\n| :-------------------- | :-------------------------------------------------------------------- | :-------------------------- | :--------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------- |\n| `attribute` | string | Optional | Attribute of `entity2` to use for inner-gauge value | |\n| `min` | number | `min` of main gauge | Minimum value for graph | βœ”οΈ (only templatable in code-editor/yaml) |\n| `max` | number | `max` of main gauge | Maximum value for graph | βœ”οΈ (only templatable in code-editor/yaml) |\n| `mode` | string | `severity` | Sets the mode of the inner gauge | |\n| | | | β€’ `severity`: Shows the inner gauge as a rotating single color | |\n| | | | β€’ `static`: Shows all the segments without any further indications | |\n| | | | β€’ `needle`: Shows all the segments with a needle | |\n| | | | β€’ `on_main`: Shows a needle on the **main**-gauge. `min` and/or `max` of the inner-gauge can still be used | |\n| `needle_color` | [string or map\u003csup\u003e5\u003c/sup\u003e](#1-color-examples) | `var(--primary-text-color)` | Color of the needle | βœ”οΈ |\n| `segments` | [list\u003csup\u003e6\u003c/sup\u003e](#2-segments-examples) | Optional | List of colors and their corresponding start values | βœ”οΈ |\n| `severity_centered` | boolean | Optional | Severity gauge (requires disabled needle) start at the center | |\n| `severity_color_mode` | string | `basic` | Sets the mode to determine/render the color of the value of a severity gauge. | |\n| | | | β€’ `basic`: Color determined based on `segments` | |\n| | | | β€’ `interpolation`: Color determined based on `segments`, interpolated between segment positions | |\n| | | | β€’ `gradient`: Show part of the gradient-arc as value | |\n| `gradient` | boolean | `false` | Shows segments as a gradient | |\n| `gradient_background` | boolean | `false` | Shows the background as a gradient for severity gauge (requires disabled needle) | |\n| `gradient_resolution` | string or number | `auto` | Level of detail for the gradient. Must be `auto` or a number indicating the amount of segments to create | |\n| `min_indicator` | [min/max indicator object](#minmax-indicator-configuration-variables) | | Configuration of the min indicator | |\n| `max_indicator` | [min/max indicator object](#minmax-indicator-configuration-variables) | | Configuration of the max indicator | |\n| `setpoint` | [setpoint object](#setpoint-configuration-variables) | | Configuration for the setpoint needle | |\n| `value` | template | state of `entity2` | Value for graph | βœ”οΈ (only available in code-editor/yaml) |\n| `round` | string | `off` | Rounds the ends of the gauge. Valid values are `off`, `full` and `small` |\n\n### Min/Max Indicator Configuration variables\n\n| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |\n| :------------ | :--------------------------------------------- | :------------------- | :--------------------------------------------------------------------------- | :-------------------------------------------------------------------------- |\n| `type` | string | Required | `attribute`, `entity`, `number` or `template` | |\n| `value` | value corresponding to the type | Required | Value of the min or max indicator | |\n| | | | β€’ `attribute`: attribute of `entity` (main-gauge) or `entity2` (inner-gauge) | |\n| | | | β€’ `entity`: Entity_id | |\n| | | | β€’ `number`: Fixed number | |\n| | | | β€’ `template`: Template that returns a number | βœ”οΈ |\n| `color` | [string or map\u003csup\u003e5\u003c/sup\u003e](#1-color-examples) | `rgb(255, 255, 255)` | Color of the min or max indicator | |\n| `opacity` | number | 0.8 | Opacity of the min or max indicator | |\n| `label` | boolean | false | Enables a label indicating the value (main gauge only) | |\n| `label_color` | string | `#111111` | Color of the label | |\n| `precision` | number | Optional | Amount of decimals to round the label to | |\n\n### Setpoint Configuration variables\n\n| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |\n| :---------- | :--------------------------------------------- | :------------------- | :--------------------------------------------------------------------------- | :-------------------------------------------------------------------------- |\n| `type` | string | Required | `attribute`, `entity`, `number` or `template` | |\n| `value` | value corresponding to the type | Required | Value of the needle | |\n| | | | β€’ `attribute`: attribute of `entity` (main-gauge) or `entity2` (inner-gauge) | |\n| | | | β€’ `entity`: Entity_id | |\n| | | | β€’ `number`: Fixed number | |\n| | | | β€’ `template`: Template that returns a number | βœ”οΈ |\n| `color` | [string or map\u003csup\u003e5\u003c/sup\u003e](#1-color-examples) | `var(--error-color)` | Color of the needle | βœ”οΈ |\n| `label` | boolean | false | Enables a label indicating the value (main gauge only) | |\n| `precision` | number | Optional | Amount of decimals to round the label to | |\n\n### Titles Configuration variables\n\n| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |\n| :-------------------- | :--------------------------------------------- | :-------------------------- | :------------------------ | :-------------------------------------------------------------------------- |\n| `primary` | string | Optional | Primary title | βœ”οΈ |\n| `primary_color` | [string or map\u003csup\u003e5\u003c/sup\u003e](#1-color-examples) | `var(--primary-text-color)` | Primary title color | βœ”οΈ |\n| `primary_font_size` | string | `15px` | Primary title font-size | βœ”οΈ |\n| `secondary` | string | Optional | Secondary title | βœ”οΈ |\n| `secondary_color` | [string or map\u003csup\u003e5\u003c/sup\u003e](#1-color-examples) | `var(--primary-text-color)` | Secondary title color | βœ”οΈ |\n| `secondary_font_size` | string | `14px` | Secondary title font-size | βœ”οΈ |\n\n### Value-Texts Configuration variables\n\n| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |\n| :---------------------------- | :--------------------------------------------- | :---------------------------------- | :-------------------------------------------------------------------------- | :-------------------------------------------------------------------------- |\n| `primary` | string | `value` or state of `entity` | Primary value-text. Use `\"\"` to overwrite the default | βœ”οΈ |\n| `primary_color` | [string or map\u003csup\u003e5\u003c/sup\u003e](#1-color-examples) | `var(--primary-text-color)` | Primary value-text color | βœ”οΈ |\n| `primary_unit` | string | `unit of measurement` of `entity` | Primary value-text unit of measurement. Use `\"\"` to overwrite the default | βœ”οΈ |\n| `primary_unit_before_value` | boolean | false | Place unit of measurement in front of value | |\n| `primary_font_size_reduction` | number [0-15] | `0` | Value by which the primary value-text is reduced | βœ”οΈ (only templatable in code-editor/yaml) |\n| `secondary` | string | `inner.value` or state of `entity2` | Secondary value-text. Use `\"\"` to overwrite the default | βœ”οΈ |\n| `secondary_color` | [string or map\u003csup\u003e5\u003c/sup\u003e](#1-color-examples) | `var(--primary-text-color)` | Secondary value-text color | βœ”οΈ |\n| `secondary_unit` | string | `unit of measurement` of `entity` | Secondary value-text unit of measurement. Use `\"\"` to overwrite the default | βœ”οΈ |\n| `secondary_unit_before_value` | boolean | false | Place unit of measurement in front of value | |\n\n\u003e [!NOTE]\n\u003e\n\u003e - Both `primary` and `secondary` value-texts can be an icon. Icons are activated for texts formatted as: `icon(...)`. For example: `icon(mdi:gauge)`. Icons cannot be combined with text.\n\u003e - Use `primary: \"\"` and/or `secondary: \"\"` to overwrite/disable the entire value_text (including unit)\n\u003e - Use `primary_unit: \"\"` and/or `secondary_unit: \"\"` to overwrite/disable the entity unit\n\u003e - No unit is added for non-numeric value_texts.\n\n### Icons Configuration variables\n\n| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |\n| :------ | :-------------------------------------------- | :------- | :---------- | :-------------------------------------------------------------------------- |\n| `left` | [icon object](#icons-configuration-variables) | Optional | | |\n| `right` | [icon object](#icons-configuration-variables) | Optional | | |\n\n#### Icon Configuration variables\n\n| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |\n| :----------- | :------ | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------- |\n| `type` | string | Required | `battery`, `hvac-mode`, `swing-mode`, or `template` | |\n| `value` | string | Optional/Required | value corresponding to the type | |\n| | | | β€’ `battery`: Battery entity_id (required) | βœ”οΈ |\n| | | | β€’ `hvac-mode`: Climate entity_id (optional, otherwise `feature_entity` is used) | |\n| | | | β€’ `swing-mode`: Climate entity_id (optional, otherwise `feature_entity` is used) | |\n| | | | β€’ `template`: Template that returns an [`Icon Template object`](#icon-template-object) (required | βœ”οΈ |\n| `state` | string | Optional | Only available for `battery`: sensor indicating the charging state of the battery (valid states for charging are `charging` and `on`) | |\n| `threshold` | number | Optional | Only available for `battery`: threshold above which the icon is not displayed | |\n| `hide_label` | boolean | Optional | Only available for `battery`: hides the label | |\n\n#### Icon Template object\n\n| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |\n| :------ | :----- | :------- | :------------------------------- | :-------------------------------------------------------------------------- |\n| `icon` | string | Required | Icon | |\n| `color` | string | Optional | Color of the icon | |\n| `label` | string | Optional | Label displayed beneath the icon | |\n\n##### Example\n\n```yaml\nicon:\n type: template\n value: |\n {{\n { \n \"icon\": \"mdi:battery\",\n \"color\": \"blue\",\n \"label\": (states('sensor.my_sensor') | int * 100) | string + \"%\"\n }\n }}\n```\n\n### Shapes Configuration variables\n\n\u003e [!NOTE]\n\u003e\n\u003e The value needs to be a valid svg path. You can use an online tool like [svg-path-editor](https://yqnn.github.io/svg-path-editor/) to design your own custom needles!\n\n| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |\n| :---------------------- | :----- | :------------------------------------------------------------------------ | :-------------------------------------------------------- | :-------------------------------------------------------------------------- |\n| `main_needle` | string | `M -28 0 L -27.5 -2 L -47.5 0 L -27.5 2.25 z` | Shape of the main gauge needle **without** inner gauge | βœ”οΈ |\n| | string | `M -49 -2 L -40 0 L -49 2 z` | Shape of the main gauge needle **with** inner gauge | βœ”οΈ |\n| `main_min_indicator` | string | `M-32.5 0A32.5 32.5 0 0 0 32.5 0L47.5 0A-47.5-47.5 0 01-47.5 0L-47.5 0 z` | Shape of the main min-indicator **without** inner gauge | βœ”οΈ |\n| | string | `M-32.5 0A32.5 32.5 0 0 0 32.5 0L47.5 0A-47.5-47.5 0 01-47.5 0L-47.5 0 z` | Shape of the main min-indicator **with** inner gauge | βœ”οΈ |\n| `main_max_indicator` | string | `M-32.5 0A32.5 32.5 0 0 0 32.5 0L47.5 0A-47.5-47.5 0 01-47.5 0L-47.5 0 z` | Shape of the main max-indicator **without** inner gauge | βœ”οΈ |\n| | string | `M-32.5 0A32.5 32.5 0 0 0 32.5 0L47.5 0A-47.5-47.5 0 01-47.5 0L-47.5 0 z` | Shape of the main max-indicator **with** inner gauge | βœ”οΈ |\n| `main_setpoint_needle` | string | `M -49 -2 L -40 0 L -49 0 z` | Shape of the setpoint needle of the main gauge | βœ”οΈ |\n| `inner_needle` | string | `M -27.5 -1.5 L -32 0 L -27.5 1.5 z` | Shape of the inner gauge needle | βœ”οΈ |\n| | string | `M -30 -1.5 L -34.5 0 L -30 1.5 z` | Shape of the `on_main` inner gauge needle | βœ”οΈ |\n| `inner_min_indicator` | string | `M-29.5 0A29.5 29.5 0 0 0 29.5 0L34.5 0A-34.5-34.5 0 01-34.5 0L-34.5 0 z` | Shape of the inner min-indicator | βœ”οΈ |\n| `inner_max_indicator` | string | `M-29.5 0A29.5 29.5 0 0 0 29.5 0L34.5 0A-34.5-34.5 0 01-34.5 0L-34.5 0 z` | Shape of the inner max-indicator | βœ”οΈ |\n| `inner_setpoint_needle` | string | `M -27.5 -1.5 L -32 0 L -27.5 0 z` | Shape of the setpoint needle of the inner gauge | βœ”οΈ |\n| | string | `M -30 -1.5 L -34.5 0 L -30 0 z` | Shape of the `on_main` setpoint needle of the inner gauge | βœ”οΈ |\n\n### Features Configuration variables\n\n#### Climate Overview Feature\n\n| Name | Type | Default | Description |\n| :--------- | :------ | :------ | :----------------------------------------------------------- |\n| `type` | string | | `climate-overview` |\n| `separate` | boolean | false | Shows the overview page on a separate dedicated controls-row |\n\n#### Temperature Control Feature\n\n| Name | Type | Default | Description |\n| :----- | :----- | :------ | :------------------- |\n| `type` | string | | `adjust-temperature` |\n\n#### Climate Fan Mode Feature\n\n| Name | Type | Default | Description |\n| :---------- | :----- | :------- | :-------------------------------------- |\n| `type` | string | | `climate-fan-modes` |\n| `fan_modes` | list | Optional | List of Fan Modes available in the card |\n\n#### Climate HVAC Mode Feature\n\n| Name | Type | Default | Description |\n| :----------- | :----- | :------- | :--------------------------------------- |\n| `type` | string | | `climate-hvac-modes` |\n| `hvac_modes` | list | Optional | List of HVAC Modes available in the card |\n\n#### Climate Preset Mode Feature\n\n| Name | Type | Default | Description |\n| :------------- | :----- | :------- | :----------------------------------------- |\n| `type` | string | | `climate-preset-modes` |\n| `preset_modes` | list | Optional | List of Preset Modes available in the card |\n\n#### Climate Swing Mode Feature\n\n| Name | Type | Default | Description |\n| :------------ | :----- | :------- | :---------------------------------------- |\n| `type` | string | | `climate-swing-modes` |\n| `swing_modes` | list | Optional | List of Swing Modes available in the card |\n\n### Custom styling options\n\nSeveral CSS variables are available for advanced customization of some of the card elements. There is no native support to apply these variables, however [`card-mod`](https://github.com/thomasloven/lovelace-card-mod) can be used like so:\n\n```yaml\ncard_mod:\n style: |\n * {\n --main-needle-stroke-width: 1px;\n --main-needle-stroke-color: white;\n }\n```\n\n| CSS variable | Description |\n| :------------------------------------- | :------------------------------------------ |\n| `--main-severity-marker` | Color of the main severity gauge marker |\n| `--main-needle-stroke-color` | Stroke color of the main needle |\n| `--main-needle-stroke-width` | Stroke width of the main needle |\n| `--main-min-indicator-stroke-color` | Stroke color of the main min indicator |\n| `--main-min-indicator-stroke-width` | Stroke width of the main min indicator |\n| `--main-max-indicator-stroke-color` | Stroke color of the main max indicator |\n| `--main-max-indicator-stroke-width` | Stroke width of the main max indicator |\n| `--main-setpoint-text-color` | Text color of the main setpoint label |\n| `--main-setpoint-bg-color` | Background color of the main setpoint label |\n| `--main-setpoint-needle-stroke-color` | Stroke color of the main setpoint needle |\n| `--main-setpoint-needle-stroke-width` | Stroke width of the main setpoint needle |\n| `--inner-needle-stroke-color` | Stroke color of the inner needle |\n| `--inner-needle-stroke-width` | Stroke width of the inner needle |\n| `--inner-min-indicator-stroke-color` | Stroke color of the inner min indicator |\n| `--inner-min-indicator-stroke-width` | Stroke width of the inner min indicator |\n| `--inner-max-indicator-stroke-color` | Stroke color of the inner max indicator |\n| `--inner-max-indicator-stroke-width` | Stroke width of the inner max indicator |\n| `--inner-setpoint-needle-stroke-color` | Stroke color of the inner setpoint needle |\n| `--inner-setpoint-needle-stroke-width` | Stroke width of the inner setpoint needle |\n\n### YAML structure - Showing is as possible and/or typical usage\n\n```yaml\ntype: custom:gauge-card-pro\nentity: sensor.sensor\nentity2: sensor.sensor\nmin: 0 | template\nmax: 100 | template\nneedle: true | false\nneedle_color: \"#aaa\" | template | light-dark-mode object\nsegments:\n - from: 0\n color: red\n - from: 25\n color: \"#FFA500\"\n - from: 50\n color: rgb(255, 255, 0)\n - from: 100\n color: var(--green-color)\ngradient: true | false\ngradient_background: true | false\ngradient_resolution: auto | very_low | low | medium\nvalue: \"{{ value_template }}\"\ninner:\n min: 0 | template\n max: 100 | template\n mode: severity | static | needle | on_main\n needle_color: \"#aaa\" | template | light-dark-mode object\n segments:\n - from: 0\n color: red\n - from: 25\n color: \"#FFA500\"\n - from: 50\n color: rgb(255, 255, 0)\n - from: 100\n color: var(--green-color)\n gradient: true | false\n gradient_background: true | false\n gradient_resolution: auto | very_low | low | medium\n value: \"{{ value_template }}\"\n round: \"off\" | \"full\" | \"small\"\n min_indicator:\n type: entity | number | template\n value: sensor.min_today\n color: \"#aaa\" | template | light-dark-mode object\n max_indicator:\n type: entity | number | template\n value: sensor.max_today\n color: \"#aaa\" | template | light-dark-mode object\nmarker: true | false\nmin_indicator:\n type: entity | number | template\n value: sensor.min_today\n color: \"#aaa\" | template | light-dark-mode object\n label: true | false\n label_color: \"#aaa\" | template | light-dark-mode object\n precision: 1;\nmax_indicator:\n type: entity | number | template\n value: sensor.max_today\n color: \"#aaa\" | template | light-dark-mode object\n label: true | false\n label_color: \"#aaa\" | template | light-dark-mode object\n precision: 1;\nsetpoint:\n type: entity | number | template\n value: sensor.main_setpoint\n color: \"#aaa\" | template | light-dark-mode object\n label: true | false\n label_color: \"#aaa\" | template | light-dark-mode object\n precision: 1;\nround: \"off\" | \"full\" | \"medium\" | \"small\"\ntitles:\n primary: Primary Title | template\n secondary: Secondary Title | template\n primary_color: \"#aaa\" | template\n secondary_color: \"#aaa\" | template\n primary_font_size: 15px | template\n secondary_font_size: 14px | template\nvalue_texts:\n primary: \"{{ states(entity) }}\"\n secondary: \"{{ states(entity2) }}\"\n primary_color: \"#aaa\"\n secondary_color: \"#aaa\"\n primary_unit: mm\n secondary_unit: mm\n primary_font_size_reduction: 15\nicons:\n left:\n type: battery | hvac-mode | swing-mode | template\n value: sensor.battery\n right:\n type: battery | hvac-mode | swing-mode | template\n value: climate.thermostat\nhide_background: true | false\nshapes:\n main_min_indicator: M -40 0 m 3.75 0 a 3.75 3.75 90 1 0 -7.5 0 a 3.75 3.75 90 1 0 7.5 0\n main_max_indicator: M 40 0 m 3.75 0 a 3.75 3.75 90 1 0 -7.5 0 a 3.75 3.75 90 1 0 7.5 0\ntap_action:\n action: more-info\n entity: sensor.sensor\nhold_action:\n action: more-info\ndouble_tap_action:\n action: more-info\nprimary_value_text_tap_action:\n action: more-info\n entity: sensor.sensor\nprimary_value_text_hold_action:\n action: more-info\nprimary_value_text_double_tap_action:\n action: more-info\nsecondary_value_text_tap_action:\n action: more-info\n entity: sensor.sensor\nsecondary_value_text_hold_action:\n action: more-info\nsecondary_value_text_double_tap_action:\n action: more-info\nicon_left_tap_action:\n action: more-info\n entity: sensor.sensor\nicon_left_hold_action:\n action: more-info\nicon_left_double_tap_action:\n action: more-info\nicon_right_tap_action:\n action: more-info\n entity: sensor.sensor\nicon_right_hold_action:\n action: more-info\nicon_right_double_tap_action:\n action: more-info\nfeature_entity: climate.ac\nfeatures:\n - type: climate-overview\n - type: adjust-temperature\n - type: climate-hvac-modes\n hvac_modes:\n - cool\n - dry\n - fan_only\n - \"off\"\n - heat_cool\n - heat\n - type: climate-fan-modes\n fan_modes:\n - auto\n - low\n - medium\n - high\n - type: climate-swing-modes\n swing_modes:\n - \"off\"\n - H\n - V\n - C\n - H+V\ncard_mod:\n style: |\n * {\n --main-needle-stroke-width: 1px;\n --main-needle-stroke-color: white;\n }\n```\n\n### \u003csup\u003e1\u003c/sup\u003e Color examples\n\n#### Fixed single value\n\n```yaml\nprimary_color: var(--info-color)\n```\n\n#### Single template value\n\n```yaml\nprimary_color: \"{{ 'var(--info-color)' }}\"\n```\n\n#### Light/Dark Mode fixed values\n\n```yaml\nprimary_color:\n light_mode: \"#FF00FF\"\n dark_mode: \"#00FF00\"\n```\n\n#### Light/Dark Mode template values\n\n```yaml\nprimary_color: |-\n {{ \n {\n \"light_mode\": \"#FF00FF\",\n \"dark_mode\": \"#00FF00\"\n }\n }}\n```\n\n### \u003csup\u003e2\u003c/sup\u003e `segments` examples\n\nSegments can be defined in two ways. Either using `from:` or `pos:`. For gradient gauges, the two behave differently. For more information checkout [this wiki](https://github.com/benjamin-dcs/gauge-card-pro/wiki/from%E2%80%90segments-vs-pos%E2%80%90segments).\n\n`from` and `pos` can be a `number` or a `percentage` (e.g. `\"50%\"`)\n\n#### Fixed list with from\n\n```yaml\nsegments:\n - from: 0\n color: \"#4caf50\"\n - from: 25\n color: \"#8bc34a\"\n - from: 50\n color: \"#ffeb3b\"\n - from: 75\n color: \"#ff9800\"\n - from: 100\n color: \"#f44336\"\n - from: 125\n color: \"#926bc7\"\n - from: 150\n color: \"#795548\"\n```\n\n#### Fixed list with pos\n\n```yaml\nsegments:\n - pos: -1\n color: var(--error-color)\n - pos: -0.25\n color: var(--warning-color)\n - pos: 0.5\n color: var(--success-color)\n```\n\n#### Template list\n\n```yaml\nsegments: |-\n {% set max = states('sensor.max_sensor') | float %}\n {{\n [\n { \"from\": 0, \"color\": \"#4caf50\" },\n { \"from\": 25, \"color\": \"#8bc34a\" },\n { \"from\": 50, \"color\": \"#ffeb3b\" },\n { \"from\": 75, \"color\": \"#ff9800\" },\n { \"from\": 100, \"color\": \"#f44336\" },\n { \"from\": 125, \"color\": \"#926bc7\" },\n { \"from\": max, \"color\":\"#795548\" }\n ]\n }}\n```\n\n## Difference between `from` and `pos` segments\n\nFor from-segments, the colour that you configure is rendered/calculated at the midpoint with the next segment (or max). Checkout the image below that illustrates this change (segment values are the same for all images)\n![midpoints](https://github.com/user-attachments/assets/4fade2d5-d3ee-4769-88fe-8197f5f4df73)\n\n## Installation\n\n### Install via HACS (recommended)\n\n[![Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=benjamin-dcs\u0026repository=gauge-card-pro\u0026category=dashboard)\n\n### Manual\n\n1. Download `gauge-card-pro.js` file from the [latest release][release-url].\n2. Put `gauge-card-pro.js` file into your `config/www` folder.\n3. Add reference to `gauge-card-pro.js` in Dashboard. There's two way to do that:\n - **Using UI:** _Settings_ β†’ _Dashboards_ β†’ _More Options icon_ β†’ _Resources_ β†’ _Add Resource_ β†’ Set _Url_ as `/local/gauge-card-pro.js` β†’ Set _Resource type_ as `JavaScript Module`.\n **Note:** If you do not see the Resources menu, you will need to enable _Advanced Mode_ in your _User Profile_\n - **Using YAML:** Add following code to `lovelace` section.\n ```yaml\n resources:\n - url: /local/gauge-card-pro.js\n type: module\n ```\n\n### Translations\n\nIf you want to help translating Gauge Card Pro, feel free to create an [issue](https://github.com/benjamin-dcs/gauge-card-pro/issues) or fork this repo and create an pull-request.\n\n## Credits\n\nThis card uses some functionality from [Mushroom](https://github.com/piitaya/lovelace-mushroom/)\n\nThis card uses some functionality from [Calendar Card Pro](https://github.com/alexpfau/calendar-card-pro)\n\nGradient are generated using my [up-to-date version](https://github.com/benjamin-dcs/gradient-path-updated) of [Gradient Path](https://github.com/cereallarceny/gradient-path).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamin-dcs%2Fgauge-card-pro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenjamin-dcs%2Fgauge-card-pro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamin-dcs%2Fgauge-card-pro/lists"}