{"id":13577169,"url":"https://github.com/kalkih/mini-graph-card","last_synced_at":"2025-05-14T13:09:00.894Z","repository":{"id":37458114,"uuid":"151280062","full_name":"kalkih/mini-graph-card","owner":"kalkih","description":"Minimalistic graph card for Home Assistant Lovelace UI","archived":false,"fork":false,"pushed_at":"2025-05-12T20:47:55.000Z","size":447,"stargazers_count":3396,"open_issues_count":143,"forks_count":250,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-05-12T21:43:23.008Z","etag":null,"topics":["automation","custom","graph","hacktoberfest","hassio","home-assistant","lovelace","lovelace-ui","sensor"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/kalkih.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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}},"created_at":"2018-10-02T15:42:27.000Z","updated_at":"2025-05-12T05:55:34.000Z","dependencies_parsed_at":"2024-05-20T03:45:09.485Z","dependency_job_id":"3fec7c52-636c-449a-a8b9-5c9b40c0ffd0","html_url":"https://github.com/kalkih/mini-graph-card","commit_stats":{"total_commits":349,"total_committers":47,"mean_commits":7.425531914893617,"dds":0.3610315186246418,"last_synced_commit":"49ca1cd8627381e2981f57906014f615f08301c9"},"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalkih%2Fmini-graph-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalkih%2Fmini-graph-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalkih%2Fmini-graph-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalkih%2Fmini-graph-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kalkih","download_url":"https://codeload.github.com/kalkih/mini-graph-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253830792,"owners_count":21970999,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["automation","custom","graph","hacktoberfest","hassio","home-assistant","lovelace","lovelace-ui","sensor"],"created_at":"2024-08-01T15:01:18.753Z","updated_at":"2025-05-14T13:08:55.855Z","avatar_url":"https://github.com/kalkih.png","language":"JavaScript","funding_links":[],"categories":["Lovelace User Interface","Install from Source","JavaScript","User Interface","Dashboards","hacktoberfest"],"sub_categories":["Custom Lovelace UI Cards","Smart Home Automation","Custom Cards"],"readme":"# Lovelace Mini Graph Card\nA minimalistic and customizable graph card for [Home Assistant](https://github.com/home-assistant/home-assistant) Lovelace UI.\n\nThe card works with entities from within the **sensor** \u0026 **binary_sensor** domain and displays the sensors current state as well as a line graph representation of the history.\n\n![Preview](https://user-images.githubusercontent.com/457678/52977264-edf34980-33cc-11e9-903b-cee43b307ed8.png)\n\n## Install\n\n### HACS (recommended) \n\nThis card is available in [HACS](https://hacs.xyz/) (Home Assistant Community Store).\n\u003csmall\u003e*HACS is a third party community store and is not included in Home Assistant out of the box.*\u003c/small\u003e\n\n### Manual install\n\n1. Download and copy `mini-graph-card-bundle.js` from the [latest release](https://github.com/kalkih/mini-graph-card/releases/latest) into your `config/www` directory.\n\n2. Add the resource reference as decribed below.\n\n\n### CLI install\n\n1. Move into your `config/www` directory.\n\n2. Grab `mini-graph-card-bundle.js`:\n\n  ```\n  $ wget https://github.com/kalkih/mini-graph-card/releases/download/v0.12.1/mini-graph-card-bundle.js\n  ```\n\n3. Add the resource reference as decribed below.\n\n### Add resource reference\n\nIf you configure Lovelace via YAML, add a reference to `mini-graph-card-bundle.js` inside your `configuration.yaml`:\n\n  ```yaml\n  resources:\n    - url: /local/mini-graph-card-bundle.js?v=0.12.1\n      type: module\n  ```\n\nElse, if you prefer the graphical editor, use the menu to add the resource:\n\n1. Make sure, advanced mode is enabled in your user profile (click on your user name to get there)\n2. Navigate to Configuration -\u003e Lovelace Dashboards -\u003e Resources Tab. Hit orange (+) icon\n3. Enter URL `/local/mini-graph-card-bundle.js` and select type \"JavaScript Module\".\n(Use `/hacsfiles/mini-graph-card/mini-graph-card-bundle.js` and select \"JavaScript Module\" for HACS install)\n4. Restart Home Assistant.\n\n## Updating\n**If you have a version older than v0.0.8 installed, please delete the current files and follow the installation instructions again.**\n\n1. Find your `mini-graph-card-bundle.js` file in `config/www` or wherever you ended up storing it.\n\n2. Replace the local file with the latest one attached in the [latest release](https://github.com/kalkih/mini-graph-card/releases/latest).\n\n3. Add the new version number to the end of the cards reference url in your `ui-lovelace.yaml` like below:\n\n  ```yaml\n  resources:\n    - url: /local/mini-graph-card-bundle.js?v=0.12.1\n      type: module\n  ```\n\n*You may need to empty the browsers cache if you have problems loading the updated card.*\n\n## Using the card\n\nWe recommend looking at the [Example usage section](#example-usage) to understand the basics to configure this card.\n(also) pay attention to the **required** options mentioned below.\n\n### Options\n\n#### Card options\n| Name | Type | Default | Since | Description |\n|------|:----:|:-------:|:-----:|-------------|\n| type ***(required)*** | string |  | v0.0.1 | `custom:mini-graph-card`.\n| entities ***(required)*** | list |  | v0.2.0 | One or more sensor entities in a list, see [entities object](#entities-object) for additional entity options.\n| icon | string |  | v0.0.1 | Set a custom icon from any of the available mdi icons.\n| icon_image | string |  | v0.12.0 | Override icon with an image url\n| name | string |  | v0.0.1 | Set a custom name which is displayed beside the icon.\n| unit | string |  | v0.0.1 | Set a custom unit of measurement.\n| tap_action | [action object](#action-object-options) |  | v0.7.0 | Action on click/tap.\n| group | boolean | `false` | v0.2.0 | Disable paddings and box-shadow, useful when nesting the card.\n| hours_to_show | integer | `24` | v0.0.2 | Specify how many hours of history the graph should present.\n| points_per_hour | number | `0.5` | v0.2.0 | Specify amount of data points the graph should display for each hour, *(basically the detail/accuracy/smoothing of the graph)*.\n| aggregate_func | string | `avg` | v0.8.0 | Specify [aggregate function](#aggregate-functions) used to calculate point/bar in the graph.\n| group_by | string | `interval` | v0.8.0 | Specify type of grouping of data, dynamic `interval`, `date` or `hour`.\n| update_interval | number |  | v0.4.0 | Specify a custom update interval of the history data (in seconds), instead of on every state change.\n| cache | boolean | `true` | v0.9.0 | Enable/disable local caching of history data.\n| show | list |  | v0.2.0 | List of UI elements to display/hide, for available items see [available show options](#available-show-options).\n| animate | boolean | `false` | v0.2.0 | Add a reveal animation to the graph.\n| height | number | `150` | v0.0.1 | Set a custom height of the line graph.\n| bar_spacing | number | `4` | v0.9.0 | Set the spacing between bars in bar graph.\n| line_width | number | `5` | v0.0.1 | Set the thickness of the line.\n| line_color | string/list | `var(--accent-color)` | v0.0.1 | Set a custom color for the graph line, provide a list of colors for multiple graph entries.\n| color_thresholds | list |  | v0.2.3 | Set thresholds for dynamic graph colors, see [Line color object](#line-color-object).\n| color_thresholds_transition | string | `smooth` | v0.4.3 | Color threshold transition, `smooth` or `hard`.\n| decimals | integer |  | v0.0.9 | Specify the exact number of decimals to show for states.\n| hour24 | boolean | `false` | v0.2.1 | Set to `true` to display times in 24-hour format.\n| font_size | number | `100` | v0.0.3 | Adjust the font size of the state, as percentage of the original size.\n| font_size_header | number | `14` | v0.3.1 | Adjust the font size of the header, size in pixels.\n| align_header | string | `default` | v0.2.0 | Set the alignment of the header, `left`, `right`, `center` or `default`.\n| align_icon | string | `right` | v0.2.0 | Set the alignment of the icon, `left`, `right` or `state`.\n| align_state | string | `left` | v0.2.0 | Set the alignment of the current state, `left`, `right` or `center`.\n| lower_bound | number *or* string |  | v0.2.3 | Set a fixed lower bound for the graph Y-axis. String value starting with ~ (e.g. `~50`) specifies soft bound.\n| upper_bound | number *or* string |  | v0.2.3 | Set a fixed upper bound for the graph Y-axis. String value starting with ~ (e.g. `~50`) specifies soft bound.\n| min_bound_range | number |  | v0.x.x | Applied after everything, makes sure there's a minimum range that the Y-axis will have. Useful for not making small changes look large because of scale.\n| lower_bound_secondary | number *or* string |  | v0.5.0 | Set a fixed lower bound for the graph secondary Y-axis. String value starting with ~ (e.g. `~50`) specifies soft bound.\n| upper_bound_secondary | number *or* string |  | v0.5.0 | Set a fixed upper bound for the graph secondary Y-axis. String value starting with ~ (e.g. `~50`) specifies soft bound.\n| min_bound_range_secondary | number |  | v0.x.x | Applied after everything, makes sure there's a minimum range that the secondary Y-axis will have. Useful for not making small changes look large because of scale.\n| smoothing | boolean | `true` | v0.8.0 | Whether to make graph line smooth.\n| state_map | [state map object](#state-map-object) |  | v0.8.0 | List of entity states to convert (order matters as position becomes a value on the graph).\n| value_factor | number | 0 | v0.9.4 | Scale value by order of magnitude (e.g. convert Watts to kilo Watts), use negative value to scale down.\n| logarithmic | boolean | `false` | v0.10.0 | Use a Logarithmic scale for the graph\n\n\n#### Entities object\nEntities may be listed directly (as per `sensor.temperature` in the example below), or defined using\nproperties of the Entity object detailed in the following table (as per `sensor.pressure` in the example below).\n\n| Name | Type | Default | Description |\n|------|:----:|:-------:|-------------|\n| entity ***(required)*** | string |  | Entity id of the sensor.\n| attribute | string | | Retrieves an attribute or [sub-attribute (attr1.attr2...)](#accessing-attributes-in-complex-structures) instead of the state\n| name | string |  | Set a custom display name, defaults to entity's friendly_name.\n| color | string |  | Set a custom color, overrides all other color options including thresholds.\n| unit | string |  | Set a custom unit of measurement, overrides `unit` set in base config.\n| aggregate_func | string |  | Override for aggregate function used to calculate point on the graph, `avg`, `median`, `min`, `max`, `first`, `last`, `sum`.\n| show_state | boolean |  | Display the current state.\n| show_indicator | boolean |  | Display a color indicator next to the state, (only when more than two states are visible).\n| show_graph | boolean |  | Set to false to completely hide the entity in the graph.\n| show_line | boolean |  | Set to false to hide the line.\n| show_fill | boolean |  | Set to false to hide the fill.\n| show_points | boolean |  | Set to false to hide the points.\n| show_legend | boolean |  | Set to false to turn hide from the legend.\n| state_adaptive_color | boolean |  | Make the color of the state adapt to the entity color.\n| y_axis | string |  | If 'secondary', displays using the secondary y-axis on the right.\n| fixed_value | boolean |  | Set to true to graph the entity's current state as a fixed value instead of graphing its state history.\n| smoothing | boolean |  | Override for a flag indicating whether to make graph line smooth.\n\n```yaml\nentities:\n  - sensor.temperature\n  - entity: sensor.pressure\n    name: Pressure\n    show_state: true\n  - sensor.humidity\n```\n\n#### Available show options\nAll properties are optional.\n\n| Name | Default | Options | Description |\n|------|:-------:|:-------:|-------------|\n| name | `true` | `true` / `false` | Display name.\n| icon | `true` | `true` / `false` | Display icon.\n| state | `true` | `true` / `false` / `last` | Display current state. `last` will show the last graph point's value.\n| graph | `line` | `line` / `bar` / `false` | Display option for the graph. If set to `bar` a maximum of `96` bars will be displayed.\n| fill | `true` | `true` / `false` / `fade` | Display the line graph fill.\n| points | `hover` | `true` / `false` / `hover` | Display graph data points.\n| legend | `true` | `true` / `false` | Display the graph legend (only shown when graph contains multiple entities).\n| average | `false` | `true` / `false` | Display average information.\n| extrema | `false` | `true` / `false` | Display max/min information.\n| labels | `hover` | `true` / `false` / `hover` | Display Y-axis labels.\n| labels_secondary | `hover` | `true` / `false` / `hover` | Display secondary Y-axis labels.\n| name_adaptive_color | `false` | `true` / `false` | Make the name color adapt with the primary entity color.\n| icon_adaptive_color | `false` | `true` / `false` | Make the icon color adapt with the primary entity color.\n\n#### Line color object\nSee [dynamic line color](#dynamic-line-color) for example usage.\n\n| Name | Type | Default | Description |\n|------|:----:|:-------:|-------------|\n| value ***(required [except in interpolation (see below)](#line-color-interpolation-of-stop-values))*** | number |  | The threshold for the color stop.\n| color ***(required)*** | string |  | Color in 6 digit hex format (e.g. `#008080`).\n\n##### Line color interpolation of stop values\nAs long as the first and last threshold stops have `value` properties, intermediate stops can exclude `value`; they will be interpolated linearly. For example, given stops like:\n\n```yaml\ncolor_thresholds:\n  - value: 0\n    color: \"#ff0000\"\n  - color: \"#ffff00\"\n  - color: \"#00ff00\"\n  - value: 4\n    color: \"#0000ff\"\n```\n\nThe values will be interpolated as:\n\n```yaml\ncolor_thresholds:\n  - value: 0\n    color: \"#ff0000\"\n  - value: 1.333333\n    color: \"#ffff00\"\n  - value: 2.666667\n    color: \"#00ff00\"\n  - value: 4\n    color: \"#0000ff\"\n```\nThe example above will result in the following colors of the graph: if value is \n* between `0` (including this value) and  `1.33333`, the color is `#ff0000`,\n* between `1.33333` (including this value) and `2.666667`, the color is `#ffff00`,\n* between `2.666667` (including this value) and `4`, the color is `#00ff00`,\n* equal to or more than `4`, the color is `#0000ff`.\n\nAs a shorthand, you can just use a color string for the stops that you want interpolated:\n\n```yaml\n  - value: 0\n    color: \"#ff0000\"\n  - \"#ffff00\"\n  - \"#00ff00\"\n  - value: 4\n    color: \"#0000ff\"\n```\n\n#### Action object options\n| Name | Type | Default | Options | Description |\n|------|:----:|:-------:|:-----------:|-------------|\n| action | string | `more-info` | `more-info` / `navigate` / `call-service`  / `url` / `none` | Action to perform.\n| entity | string |  | Any entity id | Override default entity of `more-info`, when  `action` is defined as `more-info`.\n| service | string |  | Any service | Service to call (e.g. `media_player.toggle`) when `action` is defined as `call-service`.\n| service_data | object |  | Any service data | Service data to include with the service call (e.g. `entity_id: media_player.office`).\n| navigation_path | string |  | Any path | Path to navigate to (e.g. `/lovelace/0/`) when `action` is defined as `navigate`.\n| url | string |  | Any URL | URL to open when `action` is defined as `url`.\n\n#### State map object\n| Name | Type | Default | Description |\n|------|:----:|:-------:|-------------|\n| value ***(required)*** | string |  | Value to convert.\n| label | string | same as value | String to show as label (if the value is not precise).\n\n### Aggregate functions\nRecorded values are grouped in time buckets which are determined by `group_by`, `points_per_hour` configuration.\nThese buckets are converted later to single point/bar on the graph. Aggregate function defines the methods of that conversion.\n\n| Name | Since | Description |\n|------|:-------:|-------------|\n| `avg` | v0.8.0 | Average\n| `median` | v0.11.0 | Median\n| `min` | v0.8.0 | Minimum - lowest value\n| `max` | v0.8.0 | Maximum - largest value\n| `first` | v0.9.0 |\n| `last` | v0.9.0 |\n| `sum` | v0.9.2 |\n| `delta` | v0.9.4 | Calculates difference between max and min value\n| `diff` | v0.11.0 | Calculates difference between first and last value\n\n### Theme variables\nThe following theme variables can be set in your HA theme to customize the appearance of the card.\n\n| Name | Default | Description |\n|------|:-------:|-------------|\n| mcg-title-letter-spacing |  | Letter spacing of the card title (`name` option).\n| mcg-title-font-weight | 500 | Font weight of the card title.\n\n### Example usage\n\n#### Single entity card\n\n![Single entity card](https://user-images.githubusercontent.com/457678/52009150-884d2500-24d2-11e9-9f2b-2981210d3897.png)\n\n```yaml\ntype: custom:mini-graph-card\nentities:\n - sensor.illumination\n```\n\n#### Alternative style\n\n![Alternative style](https://user-images.githubusercontent.com/457678/52009161-8daa6f80-24d2-11e9-8678-47658a181615.png)\n\n```yaml\ntype: custom:mini-graph-card\nentities:\n - sensor.illumination\nalign_icon: left\nalign_state: center\nshow:\n  fill: false\n```\n\n#### Multiple entities card\n\n![Multiple entities card](https://user-images.githubusercontent.com/457678/52009165-900cc980-24d2-11e9-8cc6-c77de58465b5.png)\n\n```yaml\ntype: custom:mini-graph-card\nname: SERVER\nicon: mdi:server\nentities:\n  - entity: sensor.server_total\n    name: TOTAL\n  - sensor.server_sent\n  - sensor.server_received\n```\n\n#### Bar chart card\n\n![Bar chart card](https://user-images.githubusercontent.com/457678/52970286-985e7300-33b3-11e9-89bc-1278c4e2ecf2.png)\n\n```yaml\ntype: custom:mini-graph-card\nentities:\n  - entity: sensor.energy_consumption\nname: ENERGY CONSUMPTION\nshow:\n  graph: bar\n```\n\n#### Show data from the past week\n![Show data from the past week](https://user-images.githubusercontent.com/457678/52009167-913df680-24d2-11e9-8732-52fc65e3f0d8.png)\n\nUse the `hours_to_show` option to specify how many hours of history the graph should represent.\nUse the `points_per_hour` option to specify the accuracy/detail of the graph.\n\n```yaml\ntype: custom:mini-graph-card\nentities:\n  - sensor.living_room_temp\nname: LIVING ROOM\nhours_to_show: 168\npoints_per_hour: 0.25\n```\n\n#### Graph only card\nUse the `show` option to show/hide UI elements.\n\n```yaml\ntype: custom:mini-graph-card\nentities:\n  - sensor.humidity\nshow:\n  icon: false\n  name: false\n  state: false\n```\n\n#### Horizontally stacked cards\nYou can stack cards horizontally by using one or more `horizontal-stack(s)`.\n\n![Horizontally stacked cards](https://user-images.githubusercontent.com/457678/52009171-926f2380-24d2-11e9-9dd4-28f010608858.png)\n\n```yaml\ntype: horizontal-stack\ncards:\n  - type: custom:mini-graph-card\n    entities:\n      - sensor.humidity\n    line_color: blue\n    line_width: 8\n    font_size: 75\n  - type: custom:mini-graph-card\n    entities:\n      - sensor.illumination\n    line_color: '#e74c3c'\n    line_width: 8\n    font_size: 75\n  - type: custom:mini-graph-card\n    entities:\n      - sensor.temperature\n    line_color: var(--accent-color)\n    line_width: 8\n    font_size: 75\n```\n\n#### Dynamic line color\nHave the graph change line color dynamically.\n\n![Dynamic line color](https://user-images.githubusercontent.com/457678/52573150-cbd05900-2e19-11e9-9e01-740753169093.png)\n\n```yaml\ntype: custom:mini-graph-card\nentities:\n  - sensor.sensor_temperature\nshow:\n  labels: true\ncolor_thresholds:\n  - value: 20\n    color: \"#f39c12\"\n  - value: 21\n    color: \"#d35400\"\n  - value: 21.5\n    color: \"#c0392b\"\n```\n\n#### Alternate y-axis\nHave one or more series plot on a separate y-axis, which appears on the right side of the graph. This example also\nshows turning off the line, points and legend.\n\n![Alternate y-axis](https://user-images.githubusercontent.com/373079/60764115-63cf2780-a0c6-11e9-8b9a-97fc47161180.png)\n\n```yaml\ntype: custom:mini-graph-card\nentities:\n  - entity: sensor.verandah\n    name: Verandah\n  - entity: sensor.lounge\n    name: Lounge\n  - entity: sensor.kitchen\n    name: Kitchen\n  - color: gray\n    entity: input_number.nighttime\n    name: Night\n    show_line: false\n    show_points: false\n    show_legend: false\n    y_axis: secondary\nshow:\n  labels: true\n  labels_secondary: true\n```\n\n\n#### Grouping by date\n\n![mini_energy_daily](https://user-images.githubusercontent.com/8268674/66688605-3ffc1e80-ec7f-11e9-872e-935870a542f3.png)\n\nYou can group values by date, this way you can visualize for example daily energy consumption.\n\n```yaml\ntype: custom:mini-graph-card\nentities:\n  - entity: sensor.energy_daily\nname: Energy consumption\nhours_to_show: 168\naggregate_func: max\ngroup_by: date\nshow:\n  graph: bar\n```\n\n#### Data aggregation functions\nYou can decide how values are aggregated for points on graph. Example how to display min, max, avg temperature per day\nfrom last week.\n\n![mini_temperature_aggregate_daily](https://user-images.githubusercontent.com/8268674/66688610-44c0d280-ec7f-11e9-86c2-a728da239dab.png)\n\n```yaml\ntype: custom:mini-graph-card\nentities:\n  - entity: sensor.outside_temp\n    aggregate_func: max\n    name: Max\n    color: \"#e74c3c\"\n  - entity: sensor.outside_temp\n    aggregate_func: min\n    name: Min\n  - entity: sensor.outside_temp\n    aggregate_func: avg\n    name: Avg\n    color: green\nname: Temp outside daily (last week)\nhours_to_show: 168\ngroup_by: date\n```\n\n#### Non-numeric sensor states\n\n![mini_binary_sensor](https://user-images.githubusercontent.com/8268674/66825779-e1ff5d80-ef42-11e9-89eb-673d2ada8d34.png)\n\nYou can render non-numeric states by providing state_map config. For example this way you can show data coming from binary sensors.\n\n```yaml\ntype: custom:mini-graph-card\nentities:\n  - entity: binary_sensor.living_room_motion\n    name: Living room\n  - entity: binary_sensor.corridor_motion\n    name: Corridor\n  - entity: binary_sensor.master_bed_motion\n    name: Master bed.\n    color: green\n  - entity: binary_sensor.bedroom_motion\n    name: Bedroom\nname: Motion last hour\nhours_to_show: 1\npoints_per_hour: 60\nupdate_interval: 30\naggregate_func: max\nline_width: 2\nsmoothing: false\nstate_map:\n  - value: \"off\"\n    label: Clear\n  - value: \"on\"\n    label: Detected\n```\n\n#### Showing additional info on the card\n\n![изображение](https://user-images.githubusercontent.com/71872483/170584118-ef826b60-dce3-42ec-a005-0f467616cd37.png)\n\nIt is possible to show a state without displaying a graph for a sensor.\nImagine there are two CO-2 sensors \u0026 one humidity sensor; graphs are displayed for the CO-2 only, and the humidity is shown as a state only.\n```\ntype: custom:mini-graph-card\nentities:\n  - entity: sensor.xiaomi_cg_1_humidity\n    show_state: true\n    show_graph: false\n  - entity: sensor.xiaomi_cg_1_co2\n    color: green\n    show_state: false\n    name: CO2-1\n  - entity: sensor.xiaomi_cg_2_co2\n    color: orange\n    show_state: false\n    name: CO2-2\nname: Humidity\nhours_to_show: 4\npoints_per_hour: 60\nshow:\n  name: true\n  legend: true\n  icon: false\n  labels: true\n```\nThis method may be also used to add a calculated value with it's own `aggregate_func` option.\n\n#### Accessing attributes in complex structures\n\nWhen using the `attribute` option in the [entities object](#entities-object), you can access data in structured attributes, such as dictionaries and lists.\n\n##### Accessing dictionary attributes\nSuppose you have data stored inside a *dictionary* attribute named `dict_attribute`\n```yaml\ndict_attribute:\n  value_1: 53\n  value_2: 64\n  value_3: 72\n```\nSuch data should be addressed as `dict_attribute.sub_attribute`:\n```\ntype: custom:mini-graph-card\nentities:\n  - entity: sensor.testing_object_data\n    attribute: dict_attribute.value_1\n    name: value_1 from dictionary attribute\n```\n![image](https://github.com/ildar170975/mini-graph-card/assets/71872483/0549afd5-901e-4e86-a144-edc4cd207440)\n\n##### Accessing list attributes\n\nSuppose you have data stored inside a *list* attribute named `list_attribute`:\n```yaml\nlist_attribute:\n  - value_1: 67\n    value_2: 65\n    value_3: 93\n  - value_1: 134\n    value_2: 130\n    value_3: 186\n  - value_1: 201\n    value_2: 195\n    value_3: 279\n```\nSuch data should be addressed as `list_attribute.index.sub_attribute`:\n```\ntype: custom:mini-graph-card\nentities:\n  - entity: sensor.testing_object_data_list\n    attribute: list_attribute.0.value_1\n    name: value_1 from first element of list attribute\n```\n![image](https://github.com/ildar170975/mini-graph-card/assets/71872483/eebd0cea-da93-4bf5-97a1-118edd2a9c5e)\n\n\n## Development\n\n1. Clone this repository into your `config/www` folder using git:\n\n```\n$ git clone https://github.com/kalkih/mini-graph-card.git\n```\n\n2. Add a reference to the card in your `ui-lovelace.yaml`:\n\n```yaml\nresources:\n  - url: /local/mini-graph-card/dist/mini-graph-card-bundle.js\n    type: module\n```\n\n### Instructions\n\n*Requires `nodejs` \u0026 `npm`.*\n\n1. Move into the `mini-graph-card` repo, checkout the *dev* branch \u0026 install dependencies:\n```console\n$ cd mini-graph-card \u0026\u0026 git checkout dev \u0026\u0026 npm install\n```\n\n2. Make changes to the source code.\n\n3. Build the source by running:\n```console\n$ npm run build\n```\n\n4. Refresh the browser to see changes.\n\n    *Make sure cache is cleared or disabled.*\n\n5. *(Optional)* Watch the source and automatically rebuild on save:\n```console\n$ npm run watch\n```\n\n*The new `mini-graph-card-bundle.js` will be build and ready inside `/dist`.*\n\nNote that the `dev` branch is the most up-to-date and matches our beta releases.\n\nPlease refer to the [Contribution Guidelines](./CONTRIBUTING.md) if you're interested in contributing to the project. (And thanks for considering!)\n\n## Getting errors?\nMake sure you have `javascript_version: latest` in your `configuration.yaml` under `frontend:`.\n\nMake sure you have the latest versions of `mini-graph-card.js` \u0026 `mini-graph-lib.js`.\n\nIf you have issues after updating the card, try clearing your browser cache.\n\nIf you have issues displaying the card in older browsers, try changing `type: module` to `type: js` at the card reference in `ui-lovelace.yaml`.\n\n## License\nThis project is under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkalkih%2Fmini-graph-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkalkih%2Fmini-graph-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkalkih%2Fmini-graph-card/lists"}