ApexCharts Card

You can define reusable configuration templates in your main Lovelace configuration to avoid repeating settings across multiple cards. Templates are applied by name and can be inherited, overloaded, or chained.

Key behaviors:

• Overloading: You can override any parameter from a template with a new value in the local card configuration.
• Array Merging: Arrays are merged by matching their index.
• Inheritance: A template can inherit from another template. You can also inherit multiple templates at once by providing an array of template names. They are merged in the order defined, and this process is recursive.
• Scope: Templates must be defined in every dashboard where they are used; they are not shared across different dashboards.

Implementation based on Dashboard type:

• managed dashboards: Add the template configuration to the Raw configuration editor (found via the three-dots menu in the dashboard).
• yaml dashboards: Add the template configuration directly to your dashboard file (e.g., ui-lovelace.yaml).

# Define templates in your dashboard configuration
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

# Use the template in a card
- type: custom:apexcharts-card
  config_templates: bandwidth_chart
  header:
    title: WAN Bandwidth
  series:
    - entity: sensor.wan_download
    - entity: sensor.wan_upload
      invert: true

The brush feature adds a small chart at the bottom of the card that allows users to select a specific time frame to display on the main chart.

Configuration:

• Enable via experimental: brush: true.
• graph_span: Defines the time span represented by the brush.
• brush.selection_span: (Optional) Defines the default selected span in the brush. Defaults to 1/4 of the graph_span.
• brush.apex_config: (Optional) Allows custom ApexCharts settings for the bottom brush chart.

Series Control:

• Use show.in_brush: true to make a series appear in the bottom brush chart.
• Use show.in_chart: false if you want a series to only appear in the brush and not the main chart.

Warnings:

• Can be compute-heavy with large amounts of history.
• May have glitches when using columns in either the top or bottom chart.

type: custom:apexcharts-card
experimental:
  brush: true
graph_span: 2h
brush:
  selection_span: 10m
  apex_config:
    # Custom ApexCharts settings
series:
  - entity: sensor.random0_100
    type: area
    show:
      in_brush: true
      in_chart: false

The color_threshold feature allows you to change the color of a series based on its value.

Supported Chart Types:

• chart_type: radialBar, line, pie, donut
• series.type: column, area, line

Important Notes:

• For type: column, the full bar uses the defined color; gradients are not supported.
• For type: area, only the filled area supports gradients. It works best with stroke_width: 1 or stroke_width: 0.
• Enabling this may break apex_config.fill options or cause tooltip color mismatches.
• If invert: true is used, threshold values remain the same.

Colors can be names, rgb(r, g, b), #hex, or var(--color-variable). For line and area types, you can also specify opacity (0 to 1).

type: custom:apexcharts-card
experimental:
  color_threshold: true
series:
  - entity: sensor.temperature
    color_threshold:
      - value: -10
        color: blue
        opacity: 1
      - value: 0
        color: cyan
      - value: 15
        color: green
      - value: 25
        color: orange