ApexCharts Card by @RomRider

This is a highly customizable graph card for Home-Assistant's Lovelace UI.

It is based on ApexCharts.js and offers most of the features of the library.

It is also inspired by the great mini-graph-card by @kalkih

However, some things might be broken :grin:

Table of Content

• Installation
• HACS (recommended)
• Manual install
• CLI install
• Add resource reference
• Data processing steps
• Using the card
• Main Options
• series Options
• series' show Options
• header_actions or title_actions options
• *_action options
• confirmation options
• statistics options
• Main show Options
• header Options
• now Options
• group_by Options
• func Options
• chart_type Options
• span Options
• transform Option
• data_generator Option
• yaxis Options. Multi-Y axis
  • Min/Max Format
  • Examples
• Apex Charts Options Example
• Sections Views
• Layouts
• Configuration Templates
  • General
  • all_series_config options
• Experimental features
• Configuration options
• color_threshold experimental feature
• hidden_by_default experimental feature
• brush experimental feature
• Known issues
• Roadmap
• Examples
• Simple graph
• Multiple Types of Graphs
• Aggregating data
• Compare data from today with yesterday
• Change the line thickness
• Use apexcharts-card with auto-entities
• Change the height of the graph

Installation

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

1. Download and copy apexcharts-card.js from the latest release into your config/www directory.

2. Add the resource reference as described below.

CLI install

1. Move into your config/www directory.

2. Grab apexcharts-card.js:

$ wget https://github.com/RomRider/apexcharts-card/releases/download/v2.2.3/apexcharts-card.js

1. Add the resource reference as described below.

Add resource reference

If you configure Lovelace via YAML, add a reference to apexcharts-card.js inside your configuration.yaml:

resources:
  - url: /local/apexcharts-card.js?v=2.2.3
    type: module

Else, if you prefer the graphical editor, use the menu to add the resource:

1. Make sure, advanced mode is enabled in your user profile (click on your user name to get there)
2. Navigate to Dashboard --> Edit Dashboard --> Manage resources. Click the '+ Add Resource' icon in bottom-right.
3. Enter URL /local/apexcharts-card.js and select type "JavaScript Module".
4. Restart Home Assistant.

Data processing steps

This diagram shows how your data goes through all the steps allowed by this card:

Using the card

Main Options

:warning: Since this card is in its debut, you should expect breaking changes moving forward. :warning:

The card strictly validates all the options available (but not for the apex_config object). If there is an error in your configuration, it will tell you where and display a red error card.

:white_check_mark: means required.

series Options

else 1 | v1.6.0 | The opacity of the line or filled area, between 0 and 1 | | stroke_width | number | 5 | v1.6.0 | Change the width of the line. Only works for area and line | | stroke_dash | number or array | 0 | v2.1.0 | Creates a dashed line. The higher the number, the bigger the dash. An array can be used to specify more complex patterns. | | type | string | line | v1.0.0 | line, area or column are supported for now | | curve | string | smooth | v1.0.0 | smooth (nice curve), straight (direct line between points) or stepline (flat line until next point then straight up or down), monotoneCubic (create a monotone cubic spline) | | ~~extend_to_end~~ | ~~boolean~~ | ~~true~~ | ~~v1.0.0~~ | DEPRECATED since v2.0.0 ~~If the last data is older than the end time displayed on the graph, setting to true will extend the value until the end of the timeline. Only works for line and area types.~~ | | extend_to | boolean or string | end | v2.0.0 | If the value is end, it will extend the line/area to the end of the chart. With now, it will extend it to the current time (usefull for chart showing current and future data). If false it will not do anything. Only available for line and area types. | | unit | string | | v1.0.0 | Override the unit of the sensor | | float_precision | number | 1 | v1.2.0 | The precision used to display data in the legend and the tooltip. It doesn't impact how the data is displayed on the graph | | fill_raw | string | 'null' | v1.5.0 | If there is any missing value in the history, last will replace them with the last non-empty state, zero will fill missing values with 0, 'null' will fill missing values with null. This is applied before group_by options | | group_by | object | | v1.0.0 | See group_by | | invert | boolean | false | v1.2.0 | Negates the data (1 -> -1). Useful to display opposite values like network in (standard)/out (inverted) | | transform | string | | v1.5.0 | Transform your raw data in any way you like. See transform | | data_generator | string | | v1.2.0 | See data_generator | | statistics | object | | v2.0.0 | Use HA statistical data (long-term). See statistics | | offset | string | | v1.3.0 | This is different from the main offset parameter. This is at the series level. It is only useful if you want to display data from for eg. yesterday on top of the data from today for the same sensor and compare the data. The time displayed in the tooltip will be wrong as will the x-axis information. Valid values are any negative time string, eg: -1h, -12min, -1d, -1h25, -10sec, ... month (365.25 days / 12) and year (365.25 days) as unit will generate an inconsistent result, you should use days instead. | | time_delta | string | | v2.0.0 | This applies a time delta to all the data points of your chart after fetching them. You can cumulate it with offset. Valid values are any time strings starting with + or -, eg: -30min, +2h, -2d, ... | | min | number | 0 | v1.4.0 | Only used when chart_type = radialBar, see chart_type. Used to convert the value into a percentage. Minimum value of the sensor | | max | number | 100 | v1.4.0 | Only used when chart_type = radialBar, see chart_type. Used to convert the value into a percentage. Maximum value of the sensor | | color_threshold | object | | v1.6.0 | See experimental | | yaxis_id | string | | v1.9.0 | The identification name of the y-axis to which this series should be associated. See yaxis | | `