Lovelace Mini Graph Card
A minimalistic and customizable graph card for Home Assistant Lovelace UI.
The card works with entities from within the sensor & binary_sensor domain and displays the sensors current state as well as a line graph representation of the history.
Install
HACS (recommended)
This card is available in HACS (Home Assistant Community Store).
HACS is a third party community store and is not included in Home Assistant out of the box.
Manual install
Download and copy from the latest release into your directory.
Add the resource reference as decribed below.
CLI install
Move into your directory.
Grab :
- Add the resource reference as decribed below.
Add resource reference
If you configure Lovelace via YAML, add a reference to inside your :
Else, if you prefer the graphical editor, use the menu to add the resource:
- Make sure, advanced mode is enabled in your user profile (click on your user name to get there)
- Navigate to Configuration -> Lovelace Dashboards -> Resources Tab. Hit orange (+) icon
- Enter URL and select type "JavaScript Module".
- Restart Home Assistant.
Updating
If you have a version older than v0.0.8 installed, please delete the current files and follow the installation instructions again.
Find your file in or wherever you ended up storing it.
Replace the local file with the latest one attached in the latest release.
Add the new version number to the end of the cards reference url in your like below:
You may need to empty the browsers cache if you have problems loading the updated card.
Using the card
Options
Card options
| Name | Type | Default | Since | Description |
|---|---|---|---|---|
| type (required) | string | v0.0.1 | . | |
| entities (required) | list | v0.2.0 | One or more sensor entities in a list, see entities object for additional entity options. | |
| icon | string | v0.0.1 | Set a custom icon from any of the available mdi icons. | |
| name | string | v0.0.1 | Set a custom name which is displayed beside the icon. | |
| unit | string | v0.0.1 | Set a custom unit of measurement. | |
| tap_action | action object | v0.7.0 | Action on click/tap. | |
| group | boolean | v0.2.0 | Disable paddings and box-shadow, useful when nesting the card. | |
| hours_to_show | integer | v0.0.2 | Specify how many hours of history the graph should present. | |
| points_per_hour | number | v0.2.0 | Specify amount of data points the graph should display for each hour, (basically the detail/accuracy/smoothing of the graph). | |
| aggregate_func | string | v0.8.0 | Specify aggregate function used to calculate point/bar in the graph. | |
| group_by | string | v0.8.0 | Specify type of grouping of data, dynamic , or . | |
| update_interval | number | v0.4.0 | Specify a custom update interval of the history data (in seconds), instead of on every state change. | |
| cache | boolean | v0.9.0 | Enable/disable local caching of history data. | |
| show | list | v0.2.0 | List of UI elements to display/hide, for available items see available show options. | |
| animate | boolean | v0.2.0 | Add a reveal animation to the graph. | |
| height | number | v0.0.1 | Set a custom height of the line graph. | |
| bar_spacing | number | v0.9.0 | Set the spacing between bars in bar graph. | |
| line_width | number | v0.0.1 | Set the thickness of the line. | |
| line_color | string/list | v0.0.1 | Set a custom color for the graph line, provide a list of colors for multiple graph entries. | |
| color_thresholds | list | v0.2.3 | Set thresholds for dynamic graph colors, see Line color object. | |
| color_thresholds_transition | string | v0.4.3 | Color threshold transition, or . | |
| decimals | integer | v0.0.9 | Specify the exact number of decimals to show for states. | |
| hour24 | boolean | v0.2.1 | Set to to display times in 24-hour format. | |
| font_size | number | v0.0.3 | Adjust the font size of the state, as percentage of the original size. | |
| font_size_header | number | v0.3.1 | Adjust the font size of the header, size in pixels. | |
| align_header | string | v0.2.0 | Set the alignment of the header, , , or . | |
| align_icon | string | v0.2.0 | Set the alignment of the icon, , or . | |
| align_state | string | v0.2.0 | Set the alignment of the current state, , or . | |
| lower_bound | number or string | v0.2.3 | Set a fixed lower bound for the graph Y-axis. String value starting with ~ (e.g. ) specifies soft bound. | |
| upper_bound | number or string | v0.2.3 | Set a fixed upper bound for the graph Y-axis. String value starting with ~ (e.g. ) specifies soft bound. | |
| 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. | |
| 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. ) specifies soft bound. | |
| 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. ) specifies soft bound. | |
| 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. | |
| smoothing | boolean | v0.8.0 | Whether to make graph line smooth. | |
| state_map | state map object | v0.8.0 | List of entity states to convert (order matters as position becomes a value on the graph). | |
| 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. |
| logarithmic | boolean | v0.10.0 | Use a Logarithmic scale for the graph |
Entities object
Entities may be listed directly (as per in the example below), or defined using properties of the Entity object detailed in the following table (as per in the example below).
| Name | Type | Default | Description |
|---|---|---|---|
| entity (required) | string | Entity id of the sensor. | |
| name | string | Set a custom display name, defaults to entity's friendly_name. | |
| color | string | Set a custom color, overrides all other color options including thresholds. | |
| unit | string | Set a custom unit of measurement, overrides set in base config. | |
| aggregate_func | string | Override for aggregate function used to calculate point on the graph, , , , , , . | |
| show_state | boolean | Display the current state. | |
| show_indicator | boolean | Display a color indicator next to the state, (only when more than two states are visible). | |
| show_graph | boolean | Set to false to completely hide the entity in the graph. | |
| show_line | boolean | Set to false to hide the line. | |
| show_fill | boolean | Set to false to hide the fill. | |
| show_points | boolean | Set to false to hide the points. | |
| show_legend | boolean | Set to false to turn hide from the legend. | |
| state_adaptive_color | boolean | Make the color of the state adapt to the entity color. | |
| y_axis | string | If 'secondary', displays using the secondary y-axis on the right. | |
| fixed_value | boolean | Set to true to graph the entity's current state as a fixed value instead of graphing its state history. | |
| smoothing | boolean | Override for a flag indicating whether to make graph line smooth. |
Available show options
All properties are optional.
| Name | Default | Options | Description |
|---|---|---|---|
| name | / | Display name. | |
| icon | / | Display icon. | |
| state | / | Display current state. | |
| graph | / / | Display option for the graph. | |
| fill | / / | Display the line graph fill. | |
| points | / / | Display graph data points. | |
| legend | / | Display the graph legend (only shown when graph contains multiple entities). | |
| average | / | Display average information. | |
| extrema | / | Display max/min information. | |
| labels | / / | Display Y-axis labels. | |
| labels_secondary | / / | Display secondary Y-axis labels. | |
| name_adaptive_color | / | Make the name color adapt with the primary entity color. | |
| icon_adaptive_color | / | Make the icon color adapt with the primary entity color. |
Line color object
See dynamic line color for example usage.
| Name | Type | Default | Description |
|---|---|---|---|
| value (required) | number | The threshold for the color stop. | |
| color (required) | string | Color in 6 digit hex format (e.g. ). |
Action object options
| Name | Type | Default | Options | Description |
|---|---|---|---|---|
| action | string | / / / / | Action to perform. | |
| entity | string | Any entity id | Override default entity of , when is defined as . | |
| service | string | Any service | Service to call (e.g. ) when is defined as . | |
| service_data | object | Any service data | Service data to include with the service call (e.g. ). | |
| navigation_path | string | Any path | Path to navigate to (e.g. ) when is defined as . | |
| url | string | Any URL | URL to open when is defined as . |
State map object
| Name | Type | Default | Description |
|---|---|---|---|
| value (required) | string | Value to convert. | |
| label | string | same as value | String to show as label (if the value is not precise). |
Aggregate functions
Recorded values are grouped in time buckets which are determined by , configuration. These buckets are converted later to single point/bar on the graph. Aggregate function defines the methods of that conversion.
| Name | Since | Description |
|---|---|---|
| v0.8.0 | Average | |
| v0.8.0 | Minimum - lowest value | |
| v0.8.0 | Maximum - largest value | |
| v0.9.0 | ||
| v0.9.0 | ||
| v0.9.2 | ||
| v0.9.4 | Calculates difference between max and min value |
Theme variables
The following theme variables can be set in your HA theme to customize the appearance of the card.
| Name | Default | Description |
|---|---|---|
| mcg-title-letter-spacing | Letter spacing of the card title ( option). | |
| mcg-title-font-weight | 500 | Font weight of the card title. |
Example usage
Single entity card
Alternative style
Multiple entities card
Bar chart card
Show data from the past week
Use the option to specify how many hours of history the graph should represent. Use the option to specify the accuracy/detail of the graph.
Graph only card
Use the option to show/hide UI elements.
Horizontally stacked cards
You can stack cards horizontally by using one or more .
Dynamic line color
Have the graph change line color dynamically.
Alternate y-axis
Have one or more series plot on a separate y-axis, which appears on the right side of the graph. This example also shows turning off the line, points and legend.
Grouping by date
You can group values by date, this way you can visualize for example daily energy consumption.
Data aggregation functions
You can decide how values are aggregated for points on graph. Example how to display min, max, avg temperature per day from last week.
Non-numeric sensor states
You can render non-numeric states by providing state_map config. For example this way you can show data coming from binary sensors.
Development
- Clone this repository into your folder using git:
- Add a reference to the card in your :
Instructions
Requires & .
- Move into the repo, checkout the dev branch & install dependencies:
Make changes to the source code.
Build the source by running:
Refresh the browser to see changes.
Make sure cache is cleared or disabled.
(Optional) Watch the source and automatically rebuild on save:
The new will be build and ready inside .
If you plan to submit a PR, please base it on the branch.
Getting errors?
Make sure you have in your under .
Make sure you have the latest versions of & .
If you have issues after updating the card, try clearing your browser cache.
If you have issues displaying the card in older browsers, try changing to at the card reference in .
ApexCharts card - A highly customizable graph card
ok so… How do I define a =header? If I set header to true it uses the first sensor name and value?
Can I change the colour of the lines?
DavidFW1960:If I set header to true it uses the first sensor name and value?
Yes, for now. Did you want to define a title instead?
DavidFW1960:Can I change the colour of the lines?
Not yet, but it’s coming, very soon 
Best way for me to track the requests is to open them on Github. You’ll automatically be notified once released in beta and stable.
Yes define a title… is that an option? Like your traffic sources…
It’s not yet possible but I’ll add it. Would you mind opening the 2 feature requests on GH? I’ll work on this tomorrow. It should be released by the end the day for me tomorrow (CET timezone)
1 Like
yep will do right now
DONE
1 Like
This is amazing, Thanks alot! 
This is a browser_mod popup.
Waiting for colors support. 
7 Likes
Nicely done. Can’t wait for the time line boundaries. Should help in troubleshooting my update problems on the OS from 5.2 to 5.10. I should be able to see what is going on when my Pi4 freezes.
Installed.
I am missing the ability to change line width,
I’ll keep testing!
Here is an example that might help:
You can change the line width. See just above
1 Like
Just for general knowledge:
This:
Is the same as this:
1.1.0 (2021-01-26)
BREAKING CHANGES
- Replace with . Takes a time string instead of a number of hours.
Features
- Replace with . Takes a time string instead of a number of hours. (e7ed408)
- color: Define your own option for each (#7) (3a15db2), closes #4
- header: More header options and title support (#8) (2cbd769), closes #5
- Add config option (357db9a), closes #2
Bug Fixes
- tooltip: Values where following the selected point (0145ca2)
- Error was not displayed if duration couldn’t be parsed (2e2212f)
- Name and units displayed (fe5526b)
Documentation
- Add examples and fix documentation (c71b76a)
- Fix typos and broken links (7789b8f)
Chores
- changelog: Add doc and chores sections (58d7f5f)
- release: 1.1.0-dev.1 [skip ci] (e15f7b9), closes #2
- release: 1.1.0-dev.2 [skip ci] (f01afd7), closes #4#5
3 Likes
bschatzow:Nicely done. Can’t wait for the time line boundaries. Should help in troubleshooting my update problems on the OS from 5.2 to 5.10. I should be able to see what is going on when my Pi4 freezes.
This is released in beta. Feedback welcome 
Check the README in the dev branch for updated documentation.
Love this already… Kudos!
1 Like
Thanks for this incredible work!
I love this card!
1 Like
It woks. Now is there a simple way to load a specific time range? I.E yesterday at 3PM to 5PM. What I see for the current code is a offset from the current time (which is always changing as the time is changing). Not sure how many people need this but there are times I want to see my history at a known time.
For yesterday 3pm to 5pm you can do it this way:
next page →
How to seamlessly add Grafana graphs to Home Assistant
Published by Oliver on
Home Assistant dashboard are great, but Grafana is even more powerful. So why not combine them and embed your Grafana graphs directly into your Home Assistant dashboard? It is actually pretty simple.
How to push your Home Assistant data into Grafana
To get your data from Home Assistant to Grafana you first need to combine both. I described this in depth in this article. Basically you can tell Home Assistant to also save all its data in a separate InfluxDB database and then read that data from Grafana. Grafana is a great tool to build beautiful looking and very informative graphs from that data and to drill down into any part of it.
While Home Assistant also offers build-in data visualization tools they are not as powerful nor as good looking (without more customization). You can of course add pretty much everything you want via HACS but you can also just use Grafana as one single and powerful tool.
Preparing Grafana for sharing
To simply embed Grafana elements somewhere else (Home Assistant in our case) you need to first disable some security measurements. Usually you can only Grafana data when you are logged in. That is definitely important for bigger networks or public instances but in my case Grafana is only available inside my own network so I do not think I really need access control here.
Grafana settings can be edited in the Grafana configuration, which can be a file or in case of a Docker installation environment variables. On my custom smart home server the software, including Grafana, InfluxDB and Home Assistant) runs in Docker containers managed by docker-compose. I can really recommend this setup as changing settings like this only means adding a couple of lines and restarting one container.
As always you can find all the code in my GitHub repository for my smart home server. Go to the Grafana container (in my case in the file) and add a couple of new environment variables.
This will allow you to access your Grafana dashboards without having to log in and disables a security measure that prevents you from using Grafana in an iframe (basically a website in a website). Then just restart your Grafana container via Now we can include Grafana in Home Assistant dashboards.
How to include single Grafana panels in a Home Assistant dashboard
After the previously explained changes you can now very easily add single panels to your Home Assistant dashboard. Just go to your Grafana panel, click on the title and select share.
In the menu that pops up you can switch to the Embed tab and copy the src URL part from the text box. Before you do that you can also switch of the current time range slider above. That way the timeframe for the Grafana data shown in the diagram will automatically keep updating.
Now you can go back to your Home Assistant dashboard and add a new webpage card to your dashboard.
Enter the URL copied from Grafana and click close. You should now see this diagram in your dashboard! Of course you can repeat the process to add more.
How to add a full Grafana dashboard to Home Assistant
You can not only add single panels from Grafana but you can also include a full Grafana dashboard in Home Assistant. Go to the dashboard in Grafana and click the share icon next to the title.
Disable the lock timerange and copy the link. I personally also added to the URL to get rid of the side menu.
Then go back to Home Assistant and create a new tab in your dashboard. Enable the panel mode to make your Grafana panel use the full space and give it a title. Then add one webpage card and paste the link from above.
Now you have a tab in your dashboard that includes the full Grafana screen including the box at the top that allows you to change timeframes. You can also still switch very quickly back to your other tabs to control your devices. Pretty awesome! The only disadvantage is that it takes a small moment to load the Grafana elements after you open the tab. As it is all within your network it should load really fast though.
Sensor Card
The Sensor card gives you a quick overview of your sensors state with an optional graph to visualize change over time.
Screenshot of the sensor card.
To add the Sensor card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then Edit Dashboard. Click the “Add Card” button in the bottom right corner and select Sensor from the card picker. All options for this card can be configured via the user interface.
Configuration Variables
Looking for your configuration file?
type stringRequired
entity stringRequired
Entity ID of domain.
icon string (Optional)
name string (Optional)
graph string (Optional)
Type of graph ( or ).
unit string (Optional)
detail integer (Optional, default: 1)
Detail of the graph or ( = one point/hour, = six points/hour).
hours_to_show integer (Optional, default: 24)
Hours to show in graph. Minimum is 1 hour. Big values can result in delayed rendering, especially if the selected entities have a lot of state changes.
limits map (Optional)
Limits of the graph Y-axis.
min float (Optional)
Minimum value of the graph Y-axis.
if the entity is , otherwise minimum value of sample
max float (Optional)
Maximum value of the graph Y-axis.
if the entity is , otherwise maximum value of sample
theme string (Optional)
Override the used theme for this card with any loaded theme. For more information about themes, see the frontend documentation.
Example
Alternatively, the card can be configured using YAML:
Graph home assistant
These are the most popular Lovelace (Home Assistant dashboard) cards
In my opinion, one of the best things about the Home Assistant dashboard (Lovelace) is the fact that you can add custom cards. While I do not have the capabilities of developing my own cards, a bunch of very useful cards have emerged from the Home Assistant community. Some of these cards have been developed specifically for a single integration, such as the Lovelace Xiaomi Vacuum Map card, while others can be used more broadly.
As with most Home Assistant community add-ons, these cards are available from the Home Assistant Community Store. And as always, I recommend you install them using the store. That way, you will be able to update any of the cards from the Home Assistant dashboard.
Lovelace Mini Graph Card
The Lovelace Mini Graph Card is one of my absolute favourite custom Lovelace cards. And I’m not alone in that thinking. With over 1000 stars on GitHub, the developer has seemingly struck gold in the Home Assistant community. The Lovelace Mini Graph Card is a big improvement over the default History Graph Card.
Setting up the Lovelace Mini Graph Card is not the easiest of tasks, as there are a ton of customization options available. But once you get going, you will soon find yourself adding this card wherever possible. Among many other things, I use this card to monitor the following:
This card can also be used to monitor the temperature and humidity of rooms over time, display your power consumption over time, and tell you in which room motion has been detected. Any sensor and binary sensor can be displayed using this card.
This Lovelace card gets a definite recommendation from me. Using it, you can display sensor information in an attractive and useful way.
Mini Media Player
The second most popular custom Lovelace card is another one I use on many of my views, mainly to control my multiple Google Nest smart speakers. It is, of course, the popular Mini Media Player with currently over 725 stars on GitHub. Incidentally, the same person who is responsible for the Lovelace Mini Graph Card developed this card. Developer Karl Kihlström seems to know what Home Assistant dashboards need.
If you use either this card or the Lovelace Mini Graph Card and want to support the further development, you can sponsor the developer on PayPal. More information about their further projects, such as the community-sourced lyrics app Singlyricly, can be found on their personal website.
Lovelace Button card
This card is, as with the previously mentioned cards, a more customizable alternative to what is included with Home Assistant out of the box. The Lovelace Button card works with any toggleable entity.
You can select from six available actions on tap, hold, or double click: none, toggle, more-info, navigate, URL and call-service. Furthermore, you can create your own layouts, customize the aspect ratio, use icons of your liking, and even use JavaScript templates in some fields.
In contrast to the top two cards, I have never used this one extensively. I have had a play around with it, but ,so far, it isn’t used on any of my non-testing views.
Statistics Graph Card
The Statistics Graph card allows you to display a graph of statistics data for each of the entities listed.
Statistics are gathered every hour for sensors that support it. It will either keep the , and of a sensors value for a specific hour, or the for a metered entity.
If your sensor doesn’t work with statistics, check this.
Screenshot of the Statistics Graph card with none metered entities and `chart_type` `line`.
Screenshot of the Statistics Graph card with a metered entity and `chart_type` `bar`.
To add the Statistics Graph card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then Edit Dashboard. Click the “Add Card” button in the bottom right corner and select Statistics Graph from the card picker. All options for this card can be configured via the user interface.
Configuration Variables
Looking for your configuration file?
type stringRequired
entities listRequired
A list of entity IDs or objects, see below.
days_to_show integer (Optional, default: 30)
Days to show in graph. Minimum is 1 day.
chart_type string (Optional)
If the chart should be rendered as a or a chart.
stat_types list (Optional)
The stat types to render. , , ,
title string (Optional)
Options For Entities
If you define entities as objects instead of strings, you can add more customization and configuration:
Example
Alternatively, the card can be configured using YAML:
Similar news:
- Honda models 2009
- Sky light wallpaper
- Paparazzi bling bracelet
- Brother machine installation
- Gas filter autozone
- Newark patch police
- Ct balloon creations
- Quantum health salaries
- Hanako kun yandere
History Graph Card
The History Graph card allows you to display a graph for each of the entities listed.
Screenshot of the History Graph card, when the sensor has no `unit_of_measurement` defined.
Screenshot of the History Graph card, when the sensor has a `unit_of_measurement` defined.
To add the History Graph card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then Edit Dashboard. Click the “Add Card” button in the bottom right corner and select History Graph from the card picker. All options for this card can be configured via the user interface.
Configuration Variables
Looking for your configuration file?
type stringRequired
entities listRequired
A list of entity IDs or objects, see below.
hours_to_show integer (Optional, default: 24)
Hours to show in graph. Minimum is 1 hour. Big values can result in delayed rendering, especially if the selected entities have a lot of state changes.
refresh_interval integer (Optional, default: 0)
Refresh interval in seconds.
title string (Optional)
Options For Entities
If you define entities as objects instead of strings, you can add more customization and configuration:
Example
Alternatively, the card can be configured using YAML: