DOCSEARCHbyAlgolia
Submit Docs

Lovelace Mini Graph Card

repository·master·Indexed 26 days ago

https://github.com/kalkih/mini-graph-card

A minimalistic and customizable graph card for the Home Assistant Lovelace UI (version 0.13.0). It visualizes history for sensors and binary_sensors as line graphs, featuring support for dynamic color thresholds, custom aggregate functions, and state mapping for non-numeric values.

Tokens
3.3K
Snippets
8
Records
19
Agent score
37%

What's inside mini-graph-card

  1. Develop mini-graph-card locally

    master

    To develop or modify the mini-graph-card, clone the repository into your Home Assistant config/www folder and use the dev branch. You must have nodejs and npm installed.

    1. Clone the repository:
    $ git clone https://github.com/kalkih/mini-graph-card.git
    1. Add the resource reference to your ui-lovelace.yaml:
    resources:
  - url: /local/mini-graph-card/dist/mini-graph-card-bundle.js
    type: module
    1. Set up the development environment:
    $ cd mini-graph-card && git checkout dev && npm install
    1. Build the project:
    $ npm run build
    1. (Optional) Watch for changes and rebuild automatically:
    $ npm run watch

    After building, the mini-graph-card-bundle.js will be available in the /dist directory. Refresh your browser (clearing cache if necessary) to see changes.

    $ git clone https://github.com/kalkih/mini-graph-card.git
$ cd mini-graph-card && git checkout dev && npm install
$ npm run build

  3. Add resource reference for Lovelace Mini Graph Card

    master

    After installing the bundle, you must register it as a resource in Home Assistant.

    Via YAML configuration

    If you manage Lovelace via YAML, add the following to your configuration.yaml:

    resources:
  - url: /local/mini-graph-card-bundle.js?v=0.13.0
    type: module

    Via Graphical Editor

    1. Ensure Advanced Mode is enabled in your user profile.
    2. Navigate to Configuration -> Lovelace Dashboards -> Resources Tab.
    3. Click the orange (+) icon.
    4. For Manual Install: Enter URL /local/mini-graph-card-bundle.js and select type JavaScript Module.
    5. For HACS Install: Enter URL /hacsfiles/mini-graph-card/mini-graph-card-bundle.js and select type JavaScript Module.
    6. Restart Home Assistant.

  5. Install Lovelace Mini Graph Card via CLI

    master

    You can use the command line to install the card bundle directly into your config/www directory:

    1. Navigate to your config/www directory.
    2. Download the bundle using wget:
    $ wget https://github.com/kalkih/mini-graph-card/releases/download/v0.13.0/mini-graph-card-bundle.js
    1. Add the resource reference to your Lovelace configuration.

  6. Update Lovelace Mini Graph Card

    master

    Note: If you are upgrading from a version older than v0.0.8, delete your existing files before following the new installation instructions.

    To update an existing installation:

    1. Locate your mini-graph-card-bundle.js file (usually in config/www).
    2. Replace it with the latest version from the latest release.
    3. Update the version query parameter in your resource URL (e.g., in ui-lovelace.yaml) to ensure the browser loads the new version:
    resources:
  - url: /local/mini-graph-card-bundle.js?v=0.13.0
    type: module

    Tip: If the card does not appear to update, try clearing your browser cache.

  7. Access Complex Attributes (Dictionaries and Lists)

    master

    When using the attribute option, you can access nested data in structured attributes using dot notation.

    Accessing Dictionary Attributes: Use dict_attribute.sub_attribute to reach a key inside a dictionary.

    Accessing List Attributes: Use list_attribute.index.sub_attribute to reach a specific element in a list by its index, followed by its sub-attribute.

    Example for List Attribute: If list_attribute contains a list of objects where each object has value_1:

    - entity: sensor.testing_object_data_list
  attribute: list_attribute.0.value_1
  name: value_1 from first element of list attribute
    type: custom:mini-graph-card
entities:
  - entity: sensor.testing_object_data
    attribute: dict_attribute.value_1
    name: value_1 from dictionary attribute

  8. Configure Card Options

    master

    The custom:mini-graph-card supports various configuration options to customize the appearance and behavior of the graph.

    Required Options:

    • type: Must be set to custom:mini-graph-card.
    • entities: A list of one or more sensor entities.

    Common Configuration Keys:

    • name: Custom name displayed beside the icon.
    • icon: Custom MDI icon.
    • icon_image: URL for an image to override the icon.
    • unit: Custom unit of measurement.
    • hours_to_show: Number of hours of history to display (default: 24).
    • points_per_hour: Data point density/accuracy (default: 0.5).
    • aggregate_func: Function used to calculate points (e.g., avg, max, min).
    • group_by: Data grouping type (interval, date, or hour).
    • line_color: Color for the graph line (supports a list for multiple entities).
    • color_thresholds: List of thresholds for dynamic coloring.
    • show: List of UI elements to toggle (e.g., name, icon, state, graph, legend).
    • height: Custom height of the line graph (default: 150).
    • logarithmic: Use a logarithmic scale (default: false).

  9. Configure Tap Actions

    master

    The tap_action option defines what happens when a user clicks or taps the card.

    NameTypeDefaultOptions
    actionstringmore-infomore-info / navigate / call-service / url / none
    entitystringAny entity id (for more-info)
    servicestringService to call (for call-service)
    service_dataobjectService data (for call-service)
    navigation_pathstringPath to navigate to (for navigate)
    urlstringURL to open (for url)

  10. Configure Entity Options

    master

    Within the entities list, you can provide a simple string (the entity ID) or a detailed object to customize how each specific entity is rendered.

    Entity Object Properties:

    • entity (required): The entity ID.
    • attribute: Retrieve a specific attribute or sub-attribute (e.g., attr1.attr2) instead of the state.
    • name: Custom display name.
    • color: Custom color (overrides thresholds).
    • unit: Custom unit of measurement.
    • aggregate_func: Override the global aggregate function (avg, median, min, max, first, last, sum).
    • show_state: Display the current state.
    • show_legend_state: Display current state in the legend.
    • show_indicator: Display a color indicator next to the state.
    • show_graph: Set to false to hide the entity from the graph.
    • show_line: Set to false to hide the line.
    • show_fill: Set to false to hide the fill.
    • show_points: Set to false to hide the points.
    • show_legend: Set to false to hide from the legend.
    • state_adaptive_color: Make the state color adapt to the entity color.
    • y_axis: Set to 'secondary' to use the right-side Y-axis.
    • fixed_value: Graph the current state as a fixed value instead of history.
    • smoothing: Override the global smoothing setting.
    entities:
  - sensor.temperature
  - entity: sensor.pressure
    name: Pressure
    show_state: true
  - sensor.humidity

  11. Integrate Mini Graph Card into Home Assistant

    master
    The mini-graph-card is a custom Lovelace card for Home Assistant. It is registered as a custom element with the tag mini-graph-card. To use it, you must ensure the card is installed in your Home Assistant environment (e.g., via HACS) and then add it to your dashboard using the type: mini-graph-card configuration.

  12. Troubleshoot mini-graph-card errors

    master

    If you encounter issues with the card, check the following:

    • Frontend Configuration: Ensure javascript_version: latest is set in your configuration.yaml under the frontend: section.
    • Version Mismatch: Verify you are using the latest versions of mini-graph-card.js and mini-graph-lib.js.
    • Browser Cache: If issues persist after an update, clear your browser cache.
    • Browser Compatibility: If the card fails to display in older browsers, change the resource type in ui-lovelace.yaml from type: module to type: js.