{"id":38782673,"url":"https://github.com/timmaurice/lovelace-background-graph-entities","last_synced_at":"2026-03-14T00:55:03.763Z","repository":{"id":240191533,"uuid":"801915116","full_name":"timmaurice/lovelace-background-graph-entities","owner":"timmaurice","description":"The background-graph-entities lovelace component for Home Assistant displays a list of entities with their current state and a mini graph showing the entity's history.","archived":false,"fork":false,"pushed_at":"2025-11-10T20:15:02.000Z","size":619,"stargazers_count":27,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-10T22:11:17.922Z","etag":null,"topics":["custom-card","entity","graph","home-assistant","lovelace","lovelace-card"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/timmaurice.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2024-05-17T07:00:44.000Z","updated_at":"2025-11-10T20:15:05.000Z","dependencies_parsed_at":"2024-05-30T15:39:05.630Z","dependency_job_id":"54ad7b5f-45eb-4468-9fb1-fd576bffed13","html_url":"https://github.com/timmaurice/lovelace-background-graph-entities","commit_stats":null,"previous_names":["timmaurice/background-graph-entities"],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/timmaurice/lovelace-background-graph-entities","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmaurice%2Flovelace-background-graph-entities","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmaurice%2Flovelace-background-graph-entities/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmaurice%2Flovelace-background-graph-entities/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmaurice%2Flovelace-background-graph-entities/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timmaurice","download_url":"https://codeload.github.com/timmaurice/lovelace-background-graph-entities/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmaurice%2Flovelace-background-graph-entities/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28508464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T11:50:55.898Z","status":"ssl_error","status_checked_at":"2026-01-17T11:50:55.569Z","response_time":85,"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":["custom-card","entity","graph","home-assistant","lovelace","lovelace-card"],"created_at":"2026-01-17T12:27:54.679Z","updated_at":"2026-03-14T00:55:03.755Z","avatar_url":"https://github.com/timmaurice.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/timmaurice"],"categories":[],"sub_categories":[],"readme":"# Background Graph Entities Custom Component\n\n[![hacs_badge](https://img.shields.io/badge/HACS-Custom-41BDF5.svg?style=flat-square)](https://github.com/hacs/integration)\n![GitHub release (latest by date)](https://img.shields.io/github/v/release/timmaurice/lovelace-background-graph-entities?style=flat-square)\n[![GH-downloads](https://img.shields.io/github/downloads/timmaurice/lovelace-background-graph-entities/total?style=flat-square)](https://github.com/timmaurice/lovelace-background-graph-entities/releases)\n[![GH-last-commit](https://img.shields.io/github/last-commit/timmaurice/lovelace-background-graph-entities.svg?style=flat-square)](https://github.com/timmaurice/lovelace-background-graph-entities/commits/master)\n[![GH-code-size](https://img.shields.io/github/languages/code-size/timmaurice/lovelace-background-graph-entities.svg?style=flat-square)](https://github.com/timmaurice/lovelace-background-graph-entities)\n![GitHub](https://img.shields.io/github/license/timmaurice/lovelace-background-graph-entities?style=flat-square)\n\n## Overview\n\nThe `background-graph-entities` custom component for Home Assistant displays a list of entities with their current state and a mini graph showing the entity's history. This component is ideal for monitoring various sensor data, such as temperature, humidity, or other metrics.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/timmaurice/lovelace-background-graph-entities/main/image.png\" alt=\"Card Screenshot\" width=\"260\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/timmaurice/lovelace-background-graph-entities/main/image-entity.png\" alt=\"Entity Editor Screenshot\" width=\"260\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/timmaurice/lovelace-background-graph-entities/main/image-color-thresholds.png\" alt=\"Color Thresholds Editor Screenshot\" width=\"260\"\u003e\n\u003c/p\u003e\n\n## Features\n\n- **Dynamic Background Graphs:** Each entity row features a beautiful, live-updating graph of its history as a background, with smooth, rounded lines.\n- **Highly Customizable:**\n  - **Global \u0026 Per-Entity Styling:** Configure graph appearance globally or override settings for each entity individually.\n  - **Dynamic Line Colors:** Use a single color or define value-based thresholds to create stunning color gradients.\n  - **Adjustable Graph Appearance:** Control line width, opacity, and an optional glow effect to match your dashboard's theme.\n  - **Multiple Curve Styles:** Choose between `spline` (default), `linear`, `natural`, or `step` curves to customize the graph's appearance.\n- **Powerful UI Editor:** A user-friendly editor makes configuration a breeze.\n  - **Drag \u0026 Drop:** Easily reorder entities and color thresholds.\n  - **Live Previews:** See your changes instantly.\n  - **Color Pickers:** Choose colors with ease.\n- **Interactive Editing:** Dots appear on the graph only in edit mode, helping you visualize the data points without cluttering the normal view.\n- **Performance-Tuned:**\n  - **Data Downsampling:** Configure `points_per_hour` to show smooth graphs over long periods without slowing down your browser.\n  - **Configurable Update Interval:** Control how often data is fetched.\n- **User-Friendly:**\n  - **Clickable Entities:** Tap any entity to open its \"More Info\" dialog.\n  - **Smart Formatting:** Automatically formats time-based sensors (e.g., travel time) into a human-readable format.\n  - **Interactive Toggles:** Entities that can be turned on or off (like switches and lights) will display an interactive toggle.\n  - **Tile Style:** A compact mode that replaces the toggle with an interactive, state-aware icon and provides a cleaner layout.\n  - **Separate Graph Data:** Optionally display one entity (like a switch) while graphing the history of another (like its power consumption sensor).\n- **Secondary State Display:** When using a separate `graph_entity`, you can optionally display its current state next to the main entity's state.\n\n## Localization\n\nThe editor is available in the following languages:\n\n- English\n- German\n- French\n\n\u003cdetails\u003e\n\u003csummary\u003eContributing Translations\u003c/summary\u003e\n\nIf you would like to contribute a new translation:\n\n1.  Fork the repository on GitHub.\n2.  Copy the `src/translation/en.json` file and rename it to your language code (e.g., `es.json` for Spanish).\n3.  Translate all the values in the new file.\n4.  Submit a pull request with your changes.\n\n\u003c/details\u003e\n\n## Installation\n\n1. Ensure you have HACS installed.\n2. Add this repository to HACS as a custom repository.\n   ```yaml\n   Repository: https://github.com/timmaurice/lovelace-background-graph-entities\n   Type: Dashboard\n   ```\n3. Install `background-graph-entities` via HACS.\u003cbr\u003e\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=timmaurice\u0026repository=lovelace-background-graph-entities\u0026category=Dashboard)\n\n## Configuration\n\nThis card can be configured via the UI editor or by using YAML.\n\n### UI Editor\n\nThe card is fully configurable through the UI editor.\n\n1.  Add a new card to your dashboard.\n2.  Search for \"Background Graph Entities\" and select it.\n3.  Use the editor to configure the card title, entities, and global graph appearance.\n4.  To customize an individual entity, click the \"Edit\" icon next to it in the entity list.\n\n### YAML Configuration\n\n#### Card Options\n\n| Name               | Type    | Default      | Description                                                                                                                                                                                                                           |\n| ------------------ | ------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `type`             | string  | **Required** | `custom:background-graph-entities`                                                                                                                                                                                                    |\n| `tile_style`       | boolean | `false`      | Enables a more compact, tile-like layout. The entity value is placed below the name, and toggles are replaced by an interactive icon.                                                                                                 |\n| `title`            | string  | `''`         | The title of the card.                                                                                                                                                                                                                |\n| `hours_to_show`    | number  | `24`         | The number of hours of history to display in the graphs.                                                                                                                                                                              |\n| `line_width`       | number  | `3`          | The width of the graph line in pixels.                                                                                                                                                                                                |\n| `line_opacity`     | number  | `0.2`        | The opacity of the graph line. The UI slider allows values from 0.05 (mostly transparent) to 0.8 (more opaque).                                                                                                                       |\n| `line_color`       | string  | Theme-aware  | The color of the graph line. Can be any valid CSS color. Defaults to `white` in dark mode and `black` in light mode. Ignored if `color_thresholds` is used.                                                                           |\n| `line_length`      | string  | `long`       | The length of the graph. Can be `long` or `short`. `short` provides more space for the entity value.                                                                                                                                  |\n| `line_glow`        | boolean | `false`      | Adds a subtle glow effect to the graph line.                                                                                                                                                                                          |\n| `curve`            | string  | `spline`     | The interpolation type for the graph line. Can be `spline`, `linear`, `natural`, or `step`.                                                                                                                                           |\n| `color_thresholds` | list    | `[]`         | A list of color thresholds to create a gradient line. See Advanced Example.                                                                                                                                                           |\n| `graph_min`        | number  | `undefined`  | Sets a fixed lower bound for the Y-axis of the graph.                                                                                                                                                                                 |\n| `graph_max`        | number  | `undefined`  | Sets a fixed upper bound for the Y-axis of the graph.                                                                                                                                                                                 |\n| `points_per_hour`  | number  | `1`          | The number of time buckets per hour. The card calculates the median value for each bucket and fills in any gaps with the last known value to create a continuous graph. Higher values provide more detail but may impact performance. |\n| `update_interval`  | number  | `600`        | How often to fetch history data, in seconds (e.g., 600 = 10 minutes).                                                                                                                                                                 |\n| `show_icon`        | boolean | `true`       | Set to `false` to hide the entity icon.                                                                                                                                                                                               |\n\n#### Entity Options\n\nEach entry in the `entities` list can be a string (the entity ID) or an object with more specific configurations.\n\n| Name                         | Type    | Default                   | Description                                                                                               |\n| ---------------------------- | ------- | ------------------------- | --------------------------------------------------------------------------------------------------------- |\n| `entity`                     | string  | **Required**              | The ID of the entity to display.                                                                          |\n| `name`                       | string  | Entity's friendly name    | A custom name for the entity.                                                                             |\n| `icon`                       | string  | Entity's icon             | A custom icon for the entity (e.g., `mdi:thermometer`).                                                   |\n| `icon_color`                 | string  | Theme-aware               | A custom color for the icon (e.g., `orange` or `#ffaa00`). Defaults to the theme's icon color.            |\n| `graph_entity`               | string  | `entity` ID               | An optional entity ID to use for the graph's history data, instead of the main entity.                    |\n| `show_graph_entity_state`    | boolean | `false`                   | If `graph_entity` is set, set this to `true` to display its state next to the main entity's state.        |\n| `overwrite_graph_appearance` | boolean | `false`                   | Set to `true` to enable entity-specific graph settings below. Required for per-entity overrides to apply. |\n| `line_color`                 | string  | Global `line_color`       | Overrides the global `line_color` for this entity only.                                                   |\n| `line_opacity`               | number  | Global `line_opacity`     | Overrides the global `line_opacity` for this entity only.                                                 |\n| `color_thresholds`           | list    | Global `color_thresholds` | Overrides the global `color_thresholds` for this entity only.                                             |\n| `graph_min`                  | number  | Global `graph_min`        | Overrides the global `graph_min` for this entity only.                                                    |\n| `graph_max`                  | number  | Global `graph_max`        | Overrides the global `graph_max` for this entity only.                                                    |\n| `show_icon`                  | boolean | Global `show_icon`        | Overrides the global `show_icon` for this entity only.                                                    |\n\n### Examples\n\n#### 1. Minimal Configuration\n\nThe simplest way to use the card is by providing a list of entity IDs.\n\n```yaml\ntype: custom:background-graph-entities\nentities:\n  - sensor.outside_temperature\n  - sensor.living_room_humidity\n```\n\n#### 2. Basic Configuration\n\nThis example sets a title and customizes the appearance of all graphs.\n\n```yaml\ntype: custom:background-graph-entities\ntitle: Office Sensors\nhours_to_show: 48\nline_width: 2\nline_color: 'var(--primary-color)'\nline_opacity: 0.3\nentities:\n  - entity: sensor.office_temperature\n    name: Temperature\n    icon: mdi:thermometer\n  - entity: sensor.office_humidity\n    name: Humidity\n    icon: mdi:water-percent\n```\n\n#### 3. Advanced Configuration with Overrides\n\nThis example demonstrates how to use global settings and override them for specific entities.\n\n```yaml\ntype: custom:background-graph-entities\ntitle: Advanced Sensor Graphs\nhours_to_show: 72\nline_color: '#9da0a2' # A default grey color for graphs\nline_width: 2\nline_opacity: 0.2\ncurve: linear\nline_glow: true\ntile_style: true\nentities:\n  # This entity uses the global settings\n  - entity: sensor.living_room_temperature\n\n  # This entity has its own line color and opacity\n  - entity: sensor.bedroom_temperature\n    icon: mdi:thermometer-lines\n    icon_color: '#3498db'\n    overwrite_graph_appearance: true\n    line_color: '#3498db' # blue\n    line_opacity: 0.5\n\n  # This entity uses color thresholds, which creates a gradient\n  - entity: sensor.co2_level\n    name: CO2 Level\n    overwrite_graph_appearance: true\n    color_thresholds:\n      - value: 400\n        color: '#2ecc71' # green\n      - value: 1000\n        color: '#f1c40f' # yellow\n      - value: 2000\n        color: '#e74c3c' # red\n\n  # This entity shows a switch but graphs its power sensor\n  - entity: switch.office_light\n    name: Office Light\n    graph_entity: sensor.office_light_power\n    show_graph_entity_state: true\n```\n\n## Development\n\n\u003cdetails\u003e\n\u003csummary\u003eTo contribute to the development, you'll need to set up a build environment.\u003c/summary\u003e\n\n1.  **Clone the repository:**\n\n    ```bash\n    git clone https://github.com/timmaurice/lovelace-background-graph-entities.git\n    cd lovelace-background-graph-entities\n    ```\n\n2.  **Install dependencies:**\n\n    ```bash\n    npm install\n    ```\n\n3.  **Build the card:**\n    This command will compile the card and place the output in the `dist/` directory.\n\n    ```bash\n    npm run build\n    ```\n\n4.  In your Home Assistant instance, you will need to configure Lovelace to use the local development version of the card from `dist/background-graph-entities.js`.\n\u003c/details\u003e\n\n---\n\nFor further assistance or to report issues, please visit the [GitHub repository](https://github.com/timmaurice/lovelace-background-graph-entities).\n\n![Star History Chart](https://api.star-history.com/svg?repos=timmaurice/lovelace-background-graph-entities\u0026type=Date)\n\n## ☕ Support My Work\n\n[\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" height=\"30\" /\u003e](https://www.buymeacoffee.com/timmaurice)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmaurice%2Flovelace-background-graph-entities","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimmaurice%2Flovelace-background-graph-entities","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmaurice%2Flovelace-background-graph-entities/lists"}