Home

Awesome

License HACS Supported Downloads GitHub Activity Stable Beta Community Forum

ApexCharts Card by @RomRider <!-- omit in toc -->

Header

This is higly customizable graph card for Home-Assistant's Lovelace UI.<br/>

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 <!-- omit in toc -->

Installation

HACS (recommended)

This card is available in HACS (Home Assistant Community Store). <small>HACS is a third party community store and is not included in Home Assistant out of the box.</small>

Manual install

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

  2. Add the resource reference as decribed 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.1.2/apexcharts-card.js
  1. Add the resource reference as decribed 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.1.2
    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 Configuration -> Lovelace Dashboards -> Resources Tab. Hit orange (+) icon
  3. Enter URL /local/apexcharts-card.js and select type "JavaScript Module".
  4. Restart Home Assistant.

Data processing steps

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

data_processing_steps

Using the card

Main Options

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

The card stricly 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.

NameTypeDefaultSinceDescription
:white_check_mark: typestringv1.0.0custom:apexcharts-card
:white_check_mark: seriesarrayv1.0.0See series
config_templatesarrayv1.6.0Define a configuration once and reuse it multiple times. See config_templates
color_listarrayv1.6.0Define the array of colors applied to the series. Will be overriden by each serie's color if defined. Usefull for config_templates mainly.
all_series_configobjectv1.6.0If something is defined here it will apply this config to all the series. It accepts the same options as a serie minus entity. It is useful to avoid repetition but the same thing can be achieve in each serie individually. See series and all_series_config for an example
chart_typestringlinev1.4.0See chart_type
update_intervalstringv1.1.0By default the card updates on every state change. Setting this overrides the behaviour. Valid values are any time string, eg: 1h, 12min, 1d, 1h25, 10sec, ...
update_delaystring1500msv1.4.0If the chart doesn't display the last state but the one before, you'll want to increase this value, don't go over 10s, it's not necessary. You'll also want to increase this value if you are using attribute in the series. Valid values are any time strings. This is because of how Home-Assistant works with history, see here
graph_spanstring24hv1.1.0The span of the graph as a time interval. Valid values are any time string, eg: 1h, 12min, 1d, 1h25, 10sec, ...
spanobjectv1.2.0See span
showobjectv1.0.0See show
hours_12booleanv1.8.0If undefined, it will follow Home-Assistant's user time format. If true, it will force time to be displayed in 12h format. If false it will force the time to be displayed in 24h format.
cachebooleantruev1.0.0Use in-browser data caching to reduce the load on Home Assistant's server
stackedbooleanfalsev1.0.0Enable if you want the data to be stacked on the graph
layoutstringv1.0.0See layouts
headerobjectv1.0.0See header
nowobjectv1.5.0See now
y_axis_precisionnumber1v1.2.0DEPRECATED since v1.10.0 The float precision used to display numbers on the Y axis. Only works if yaxis is undefined.
yaxisarrayv1.9.0See yaxis
apex_configobjectv1.0.0Apexcharts API 1:1 mapping. You call see all the options here --> Options (Reference) in the Menu. See Apex Charts
experimentalobjectv1.6.0See experimental
localestringv1.7.0Default is to inherit from Home-Assistant's user configuration. This overrides it and forces the locale. Eg: en, or fr. Reverts to en if locale is unknown.
brushobjectv1.8.0See brush

series Options

NameTypeDefaultSinceDescription
:white_check_mark: entitystringv1.0.0The entity_id of the sensor to display
attributestringv1.4.0Instead of retrieving the state, it will retrieve an attribute of the entity. Make sure you increase update_delay if the chart doesn't reflect the last value of the attribute
namestringv1.0.0Override the name of the entity
stack_groupstringv2.1.0When stacked is true, groups the different series with the name stack_group together. Only works for type: column. All series' names need to be be unique because of a bug in apexcharts.js
colorstringv1.1.0Color of the serie. Supported formats: yellow, #aabbcc, rgb(128, 128, 128) or var(--css-color-variable)
opacitynumber0.7 for area<br/>else 1v1.6.0The opacity of the line or filled area, between 0 and 1
stroke_widthnumber5v1.6.0Change the width of the line. Only works for area and line
stroke_dashnumber0v2.1.0Creates a dashed line. The higher the number, the bigger the dash.
typestringlinev1.0.0line, area or column are supported for now
curvestringsmoothv1.0.0smooth (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_endbooleantruev1.0.0DEPRECATED 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_toboolean or stringendv2.0.0If 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.
unitstringv1.0.0Override the unit of the sensor
float_precisionnumber1v1.2.0The precision used to display data in the legend and the tooltip. It doesn't impact how the data is displayed on the graph
fill_rawstring'null'v1.5.0If 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_byobjectv1.0.0See group_by
invertbooleanfalsev1.2.0Negates the data (1 -> -1). Usefull to display opposites values like network in (standard)/out (inverted)
transformstringv1.5.0Transform your raw data in any way you like. See transform
data_generatorstringv1.2.0See data_generator
statisticsobjectv2.0.0Use HA statistical data (long-term). See statistics
offsetstringv1.3.0This is different from the main offset parameter. This is at the series level. It is only usefull 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 inconsistent result, you should use days instead.
time_deltastringv2.0.0This applies a time delta to all the datapoints 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, ...
minnumber0v1.4.0Only used when chart_type = radialBar, see chart_type. Used to convert the value into a percentage. Minimum value of the sensor
maxnumber100v1.4.0Only used when chart_type = radialBar, see chart_type. Used to convert the value into a percentage. Maximum value of the sensor
color_thresholdobjectv1.6.0See experimental
yaxis_idstringv1.9.0The identification name of the y-axis which this serie should be associated to. See yaxis
showobjectv1.3.0See serie's show options
header_actionsobjectv1.10.0See header_actions

series' show Options

NameTypeDefaultSinceDescription
legend_valuebooleantruev1.3.0Show/Hide the state in the legend. Will still display the name
as_durationstringv1.3.0Will pretty print the states as durations. Doesn't affect the graph, only the tooltip/legend/header display. You provide the source unit of your sensor. Valid values are millisecond, second, minute, hour, day, week, month, year.<br/>Eg: if the state is 345 and as_duration is set to minute then it would display 5h 45m
in_headerboolean or stringtruev1.4.0If show_states is enabled, this would show/hide this specific serie in the header. If set to raw (introduced in v1.7.0), it would display the latest raw state of the entity in the header bypassing any grouping/transformation done by the card. If the graph spans into the future (using data_generator): before_now would display the value just before the current time and after_now would display the value just after the current time (Introduced in v1.8.0)
name_in_headerbooleantruev1.8.0Only valid if in_header: true. If false, it will hide the name of the serie under the its state in the header
header_color_thresholdbooleanfalsev1.7.0If true and color_threshold experimental mode is enabled, it will colorize the header's state based on the threshold (ignoring opacity).
in_chartbooleantruev1.4.0If false, hides the serie from the chart
datalabelsboolean or stringfalsev1.5.0If true will show the value of each point for this serie directly in the chart. Don't use it if you have a lot of points displayed, it will be a mess. If you set it to total (introduced in v1.7.0), it will display the stacked total value (only works when stacked: true). If you set it to percent, it will display the percentage of the serie instead of the value in the case of a pie or donut chart.
hidden_by_defaultbooleanfalsev1.6.0See experimental
extremasboolean or stringfalsev1.7.0If true, will show the min and the max of the serie in the chart. If the value is time, it will display also the time of the min/max value on top of the value. From v2.0.0, min or max will display the min or the max only and min+time or max+time will display the time of the min or the max. Displaying the time doesn't work with stacked: true.
in_brushbooleanfalsev1.8.0See brush
offset_in_namebooleantruev1.8.0If true, appends the offset information to the name of the serie. If false, it doesn't

header_actions or title_actions options

NameTypeDefaultSinceDescription
tap_actionobjectv1.10.0Action to perform on tap. See action options
hold_actionobjectv1.10.0Action to perform on hold. See action options
double_tap_actionobjectv1.10.0Action to perform on double tap. See action options

*_action options

NameTypeDefaultSinceDescription
actionstringmore-infov1.10.0Action to perform. Valid values are: more-info, toggle, call-service, none, navigate, url
entitystringv1.10.0Only valid for more-info. Overrides the more-info target entity. Default is to use the serie's entity
navigation_pathstringv1.10.0Path to navigate to (e.g. /lovelace/0/) when action is navigate
url_pathstringv1.10.0URL to open on click when action is url. The URL will open in a new tab
servicestringv1.10.0Any valid Home-Assistant service
service_dataobjectv1.10.0Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service
confirmationobjectv1.10.0Display a confirmation popup. See confirmation

Example:

type: custom:apexcharts-card
series:
  - entity: sensor.indoor_temperature
    header_actions:
      tap_action:
        action: call-service
        service: climate.turn_on
        service_data:
          entity_id: climate.heater

confirmation options

This will popup a dialog box before running the action.

NameTypeDefaultSinceDescription
textstringv1.10.0This text will be displayed in the popup
exemptionsarrayv1.10.0Any user declared in this list will not see the confirmation dialog. Format user: USER_ID

Example:

type: custom:apexcharts-card
series:
  - entity: sensor.indoor_temperature
    header_actions:
      tap_action:
        action: call-service
        service: script.toggle_climate
        service_data:
          entity: climate.heater
        confirmation:
          text: Are you sure?
          exemptions:
            - user: befc8496799848bda1824f2a8111e30a

statistics options

NameTypeDefaultSinceDescription
typestringmeanv2.0.0Type of long term statistic to pull. Can be one of min, max, mean, sum state or change
periodstringhourv2.0.0Period of statistics to pull. Can be one of 5minute, hour, day, week or month
alignstringmiddlev2.0.0Align the data points to the start, end or middle of the period of the statistics

Main show Options

NameTypeDefaultSinceDescription
loadingbooleantruev1.0.0Displays a spinning icon while the data is loading/updating
last_updatedbooleanfalsev1.10.0Show the last time the chart was updated on the bottom right

header Options

NameTypeDefaultSinceDescription
showbooleanfalsev1.0.0Show or hide the header
titlestringv1.1.0The title of the chart you want to display
title_actionsobjectv2.0.0Actions to perform while tapping the title of the chart. See title_actions
floatingbooleanfalsev1.0.0Makes the header float above the graph. Positionning will be supported later
show_statesbooleanfalsev1.1.0Show or hide the states in the header
colorize_statesbooleanfalsev1.1.0Colorize the states based on the color of the serie
standard_formatbooleanfalsev1.8.0Display the title using the standard Home-Assistant card format
disable_actionsbooleanfalsev1.10.0If true, disable all header actions

now Options

The position of the marker will only update when the card updates (state change or update_interval).

NameTypeDefaultSinceDescription
showbooleanfalsev1.5.0Shows a vertical marker for the current time on the graph. Only useful if displaying data from the future
colorstringvar(--primary-color)v1.5.0Color of the marker. The color of the text is computed automatically.
labelstringv1.5.0Text to display on the label. No label if not defined

now_marker

group_by Options

NameTypeDefaultSinceDescription
funcstringrawv1.0.0See func
durationstring1hv1.0.0If func is not raw only. It builds buckets of states over duration period of time. Doesn't work for months. Eg of valid values: 2h, 1d, 10s, 25min, 1h30, ...
fillstringlastv1.0.0If func is not raw only. If there is any missing value in the buckets of history data (grouped by duration), last will replace them with the last non-empty state, zero will fill missing values with 0, 'null' will fill missing values with null
start_with_lastbooleanfalsev1.8.0If true, each bucket of data will start with the last value from the previous bucket of data. Mostly useful only with func: diff

func Options

NameSinceDescription
rawv1.0.0Displays all the state history as known by Home Assistant
avgv1.0.0Will return the average of all the states in each bucket
minv1.0.0Will return the smallest state of each bucket
maxv1.0.0Will return the biggest state of each bucket
lastv1.0.0Will return the last state of each bucket
firstv1.0.0Will return the first state of each bucket
sumv1.0.0Will return the sum of all the states in each bucket
medianv1.0.0Will return the median of all the states in each bucket
deltav1.0.0Will return the delta between the biggest and smallest state in each bucket
diffv1.4.0Will return the difference between the last and the first entry in the bucket

chart_type Options

NameSinceDescription
linev1.0.0This is the default and will show a timeline. It is compatible with series.type = column, line and area
scatterv1.4.0Displays a cloud of points without a line between the values
piev1.4.0This will display a pie chart with the last value computed of each sensor
donutv1.4.0This will display a donut chart with the last value computed of each sensor, same as pie but with a hole in the center
radialBarv1.4.0This will display a radial bar chart with the last value computed of each sensor. The value is represented in percentage only. It is required to provide min and max for each series displayed as it requires to convert the value into percentage. The default value for min is 0 and for max it is 100. This graph works well if you want to display sensors natively in percentages

Charts Type

span Options

NameSinceDescription
startv1.2.0Display the graph from the begining of the minute, day, hour, week, month, year, isoWeek. isoWeek is the start of the week according to ISO 8601
endv1.2.0Display the graph from the end of the minute, day, hour, week, month, year, isoWeek. isoWeek is the end of the week according to ISO 8601
offsetv1.2.0Offset the graph by an amount of time. To offset in the past, start with -. Eg. of valid values: -1day, -12h, 12h, 30min, ... month (365.25 days / 12) and year (365.25 days) as unit will generate inconsistent result, you should use days instead.

Span enables you to:

graph_span: If start is defined, it should be <= to 1 unit of the one defined in `start`
span:
  start: minute, day, hour, week, month or year
  end: minute, day, hour, week, month or year
  offset: To offset in the past, prefix with `-` Timerange like 1day, 12h, 10min, -12h, -1d, ...

Eg:

transform Option

With transform, you can modify raw data comming from Home-Assistant's history using a javascript function.

Some of the things you can do:

Your javascript code will receive:

And should return a number, a float or null.

Some examples:

data_generator Option

Before we start, to learn javascript, google is your friend or ask for help on the forum :slightly_smiling_face:

data_generator is an advanced feature. It enables you to build your own data out of the last state of a sensor. It completely bypasses the history retrieval and caching mecanism.

You'll need to write a javascript function which returns a [timestamp, value][]:

Inside your javascript code, you'll have access to those variables:

Let's take this example:

yaxis Options. Multi-Y axis

:warning: If this option is used, you can't define yaxis in the main apex_config option as it will be overriden.

You can have as many y-axis as there are series defined in your configuration or less.

NameTypeDefaultSinceDescription
idstringv1.9.0Required if you define multiple yaxis. The identification name of the yaxis used to map it to a serie. Needs to be unique.
showbooleantruev1.9.0Whether to show or not the axis on the chart
oppositebooleanfalsev1.9.0If true, the axis will be shown on the right side of the chart
minauto, number or stringautov1.9.0If undefined or auto, the min of the yaxis will be automatically calculated based on the min value of all the series associated to this axis. See below for other formats.
maxauto, number or stringautov1.9.0If undefined or auto, the min of the yaxis will be automatically calculated based on the max value of all the series associated to this axis. See below for other formats.
decimalsnumber1v1.10.0Number of decimals to show on this y-axis
apex_configobjectv1.9.0Any configuration from https://apexcharts.com/docs/options/yaxis/, except min, max, show and opposite
align_tonumberv1.10.0Aligns the yaxis extremas to the closest multiple of align_to. Only valid if min or max are not fixed values.

Min/Max Format

min and max support multiple types of format:

Examples

Apex Charts Options Example

This is how you could change some options from ApexCharts as described on the Options (Reference) menu entry.

Hundreds of options are available and it is not possible to describe them all here so check over there and ask on the forum if you need help with using them.

type: custom:apexcharts-card
series:
  - ...
apex_config:
  dataLabels:
    enabled: true
    dropShadow:
      enabled: true

Some options in ApexCharts can take a javascript function as an argument. To make this possible, you'll have to prefix your function with EVAL:.

:warning: While using this EVAL: feature, there is no safeguard so use at your own risk.

Here is an example:

apex_config:
  yaxis:
    labels:
      formatter: |
        EVAL:function(value) {
          return "42";
        }

Layouts

For now, only minimal is supported: It will remove the grid, the axis and display the legend at the top. But you can use the apex_config to do whatever you want.

For code junkies, you'll find the default options I use in src/apex-layouts.ts

Configuration Templates

General

The card templates will be applied in the order they are defined: template2 will be merged with template1 and then the local config will be merged with the result. You can still chain templates together (ie. define template in a apexcharts-card template. It will follow the path recursively).

Make sure which type of lovelace dashboard you are using before changing the main lovelace configuration:

Note: Templates have to be defined in all dashboards, they are not shared.

To give you an idea where to put those (in your dashboard file/RAW editor):

apexcharts_card_templates:
  default:
    color_list: ['red', 'green', 'blue']

  bandwidth_chart:
    graph_span: 24h
    config_templates: default
    header:
      show: true
      show_states: true
      colorize_states: true
    all_series_config:
      stroke_width: 2
      opacity: 0.3
      type: area

views:
  - title: Main
    panel: true
    cards:
      [...]

And then where you define your card, you can consume those templates, and/or overload it:

- type: custom:apexcharts-card
  config_templates: bandwidth_chart
  header:
    title: WAN Bandwidth
  series:
    - entity: sensor.wan_download
    - entity: sensor.wan_upload
      invert: true

In the end, this would produce the same result as but it's shorter and you can reuse that template elsewhere:

- type: custom:apexcharts-card
  graph_span: 24h
  header:
    title: WAN Bandwidth
    show: true
    show_states: true
    colorize_states: true
  all_series_config:
    stroke_width: 2
    opacity: 0.3
    type: area
  color_list: ['red', 'green', 'blue']
  series:
    - entity: sensor.wan_download
    - entity: sensor.wan_upload
      invert: true

all_series_config options

This will allow you to apply some settings to all the series avoiding repetition. It's just syntaxic sugar and doesn't add more features.

Eg:

- type: custom:apexcharts-card
  graph_span: 24h
  all_series_config:
    stroke_width: 2
    type: area
    transform: return x / 1024;
    unit: Mb/s
  series:
    - entity: sensor.wan_download
    - entity: sensor.wan_upload
      invert: true

Generates the same result as repeating the configuration in each series:

- type: custom:apexcharts-card
  graph_span: 24h
  series:
    - entity: sensor.wan_download
      stroke_width: 2
      type: area
      transform: return x / 1024;
      unit: Mb/s
    - entity: sensor.wan_upload
      invert: true
      stroke_width: 2
      type: area
      transform: return x / 1024;
      unit: Mb/s

Experimental features

:warning: You enter the danger zone :warning:

Configuration options

NameTypeDefaultSinceDescription
color_thresholdbooleanfalsev1.6.0Will enable the color threshold feature. See color_threshold
disable_config_validationbooleanfalsev1.6.0If true, will disable the config validation. Useful if you have cards adding parameters to this one. Use at your own risk.
hidden_by_defaultbooleanfalsev1.6.0Will allow you to use the hidden_by_default option. See hidden_by_default
brushbooleanfalsev1.8.0Will display a brush which allows you to select a portion time to display on the main chart. See brush

color_threshold experimental feature

color_threshold is an experimental feature for now since enabling it will break some other default features.

If enabled, it might:

Now that you are warned, it works with:

Some notes:

And this is how to use it:

type: custom:apexcharts-card
experimental:
  color_threshold: true
series:
  - entity: sensor.temperature
    color_threshold:
      - value: -10
        # color can be a color name, rgb(r, g, b), '#0000ff' or var(--color-variable)
        # default is: the default color of the serie
        color: blue
        # optional opacity, value from 0 to 1.
        # only for line and area
        # Default is 1 for 'type: line' and 0.7 for `type: area`
        opacity: 1
      - value: 0
        color: cyan
      - value: 15
        color: green
      - value: 25
        color: orange

color_threshold

hidden_by_default experimental feature

Enabling this experimental feature might/will break the auto-scaling and auto-column width feature. Don't open an issue for that. It only works if all the series have a unique name.

This option is useful if you want to hide a serie from the chart by default when it's loaded as if you had clicked on the legend to disable this serie.

This is how to use it:

type: custom:apexcharts-card
experimental:
  hidden_by_default: true
series:
  - entity: sensor.temperature
    show:
      hidden_by_default: true
  - entity: sensor.temperature_office

brush experimental feature

brush will allow you to display a small chart on the bottom of the card to select a time frame to display on the main chart.

brush_image

Things to know:

Here is how to use it (this represents the chart above):

type: custom:apexcharts-card
experimental:
  color_threshold: true
  brush: true # This is required
graph_span: 2h # This will represent the span of the brush
brush:
  # selection_span: optional
  # defines the default selected span in the brush
  # Defaults to 1/4 of the `graph_span`
  selection_span: 10m
  # apex_config: optional
  apex_config:
    # Any ApexCharts settings you want to apply to the brush
    # Same as the standard apex_config
series:
  - entity: sensor.random0_100
    color: blue
    type: area
    stroke_width: 1
    color_threshold:
      - value: 0
        color: red
      - value: 50
        color: yellow
      - value: 100
        color: green
  - entity: sensor.random0_100
    color: blue
    stroke_width: 1
    float_precision: 0
    show:
      # in_brush: set it to true and the serie will show up in the brush
      in_brush: true
      # add this also if you want your serie to only show up in the brush
      in_chart: false

Known issues

Roadmap

Not ordered by priority:

Examples

Simple graph

type: custom:apexcharts-card
series:
  - entity: sensor.temperature

Multiple Types of Graphs

multi-graph

type: custom:apexcharts-card
graph_span: 6h
header:
  show: false
series:
  - entity: sensor.humidity
    type: line
    name: Outside Humidity
    group_by:
      func: avg
      duration: 30min
  - entity: sensor.random0_100
    type: column
    name: Office Humidity
    group_by:
      func: avg
      duration: 30min

Aggregating data

aggregating_data

type: custom:apexcharts-card
graph_span: 1h
header:
  show: false
series:
  - entity: sensor.random0_100
    name: AVG
    curve: smooth
    type: line
    group_by:
      duration: 10min
      func: avg
  - entity: sensor.random0_100
    curve: smooth
    name: MIN
    type: line
    group_by:
      duration: 10min
      func: min
  - entity: sensor.random0_100
    curve: smooth
    name: MAX
    type: line
    group_by:
      duration: 10min
      func: max
  - entity: sensor.random0_100
    curve: smooth
    name: LAST
    type: line
    group_by:
      duration: 10min
      func: last
  - entity: sensor.random0_100
    curve: smooth
    name: FIRST
    type: line
    group_by:
      duration: 10min
      func: first

Compare data from today with yesterday

type: custom:apexcharts-card
graph_span: 1d
span:
  start: day
header:
  show: false
series:
  # data from today
  - entity: sensor.temperature
  # data from yesterday offsetted to be displayed today
  - entity: sensor.temperature
    offset: -1d

Change the line thickness

Use apexcharts-card with auto-entities

This requires the auto-entities card

type: custom:auto-entities
filter:
  include:
    - entity_id: sensor.temperature*
      options:
        entity: this.entity_id
card:
  type: custom:apexcharts-card

Change the height of the graph

This is described in the ApexCharts.js documentation here where you can find way more options.

type: custom:apexchart-card
apex_config:
  chart:
    height: 250px
series:
  - entity: sensor.temperature