### ApexCharts Card `span` Configuration Examples

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Demonstrates how to configure the time span for charts using `graph_span` and `span` options. This allows precise control over the displayed time range, including starting and ending points, and offsets.

```yaml
type: custom:apexcharts-card
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, ...
```

```yaml
type: custom:apexcharts-card
graph_span: 24h
span:
  start: day
```

```yaml
type: custom:apexcharts-card
graph_span: 24h
span:
  start: day
  offset: -1d
```

```yaml
type: custom:apexcharts-card
graph_span: 12h
span:
  start: day
  offset: +6h
```

```yaml
type: custom:apexcharts-card
graph_span: 7d
span:
  end: day
```

--------------------------------

### Basic Line Chart Configuration

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Defines a simple line chart to display sensor history with minimal configuration. This example shows how to set up a basic card to visualize the 'sensor.temperature' entity.

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

--------------------------------

### Time Span Configuration Examples

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Controls the displayed time range using graph_span and span options with start/end alignment and offsets. Examples include displaying today's data, yesterday's data, and the last 7 days ending today.

```yaml
# Display today's data from midnight to now
type: custom:apexcharts-card
graph_span: 24h
span:
  start: day
series:
  - entity: sensor.temperature
```

```yaml
---
# Display yesterday's data
type: custom:apexcharts-card
graph_span: 24h
span:
  start: day
  offset: -1d
series:
  - entity: sensor.temperature
```

```yaml
---
# Display the last 7 days ending at end of today
type: custom:apexcharts-card
graph_span: 7d
span:
  end: day
series:
  - entity: sensor.temperature
```

--------------------------------

### Configure Header Actions and Interactivity

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Details how to set up tap, hold, and double-tap actions on header states for interactive control. This example configures navigation on title tap, calling a service on hold, and toggling an entity on double-tap.

```yaml
type: custom:apexcharts-card
header:
  show: true
  show_states: true
  colorize_states: true
  title: Climate Control
  title_actions:
    tap_action:
      action: navigate
      navigation_path: /lovelace/climate
series:
  - entity: sensor.temperature
    header_actions:
      tap_action:
        action: more-info
      hold_action:
        action: call-service
        service: climate.set_temperature
        service_data:
          entity_id: climate.thermostat
          temperature: 22
      double_tap_action:
        action: toggle
        entity: switch.heater
```

--------------------------------

### Download ApexCharts Card using Wget

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

This snippet demonstrates how to download the ApexCharts card JavaScript file using the wget command-line utility. It's typically used for manual installation or integration into a project.

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

--------------------------------

### Multi-Y Axis Configuration

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Creates charts with multiple Y-axes for series with different scales. This example configures separate Y-axes for temperature and humidity, allowing for independent scaling and display.

```yaml
type: custom:apexcharts-card
graph_span: 24h
yaxis:
  - id: temp
    min: 0
    max: ~50
    decimals: 0
    apex_config:
      tickAmount: 5
  - id: humidity
    opposite: true
    min: 0
    max: 100
    decimals: 0
    apex_config:
      tickAmount: 5
series:
  - entity: sensor.temperature
    yaxis_id: temp
    name: Temperature
  - entity: sensor.humidity
    yaxis_id: humidity
    name: Humidity
```

--------------------------------

### Configure Single Y-Axis with ApexCharts Card

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

This example demonstrates setting up a single y-axis for an ApexCharts card. It shows how to define minimum and maximum bounds, including soft bounds and fixed values, and control the number of decimals displayed. The `apex_config` allows for further customization of the y-axis.

```yaml
type: custom:apexcharts-card
header:
  show: true
  title: Max Soft Bounds + Min Fixed Bound
graph_span: 20min
series:
  - entity: sensor.random0_100
yaxis:
  - min: 0
    max: ~50
    decimals: 0
    apex_config:
      tickAmount: 4

```

--------------------------------

### Data Aggregation with group_by

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Aggregates raw data points into buckets using functions like avg, min, max, sum, median, delta, diff, first, or last. This example demonstrates aggregating power consumption data over different durations and functions.

```yaml
type: custom:apexcharts-card
graph_span: 7d
series:
  - entity: sensor.power_consumption
    name: Average Power
    group_by:
      func: avg
      duration: 1h
      fill: last
  - entity: sensor.power_consumption
    name: Max Power
    group_by:
      func: max
      duration: 1h
  - entity: sensor.power_consumption
    name: Total Energy
    group_by:
      func: sum
      duration: 1d
```

--------------------------------

### Integrate Long-Term Statistics

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Explains how to leverage Home Assistant's long-term statistics for displaying historical data. This example shows how to configure 'statistics' for sum and mean calculations over a daily period.

```yaml
type: custom:apexcharts-card
graph_span: 30d
series:
  - entity: sensor.energy_consumption
    statistics:
      type: sum
      period: day
      align: start
  - entity: sensor.temperature
    statistics:
      type: mean
      period: day
      align: middle
```

--------------------------------

### Compare Historical Data with Offset

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Displays and compares data from different time periods using series-level offset. This example shows a comparison between today's temperature and yesterday's temperature, with different styling for the historical data.

```yaml
type: custom:apexcharts-card
graph_span: 24h
span:
  start: day
header:
  show: true
  title: Today vs Yesterday
series:
  - entity: sensor.temperature
    name: Today
    color: '#3498db'
  - entity: sensor.temperature
    name: Yesterday
    offset: -1d
    color: '#95a5a6'
    stroke_dash: 5
```

--------------------------------

### Radial Bar and Pie Charts Configuration

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Displays current values as percentage-based radial bars, pie charts, or donut charts. This example shows a radial bar chart configuration for CPU, memory, and disk usage.

```yaml
# Radial Bar Chart
type: custom:apexcharts-card
chart_type: radialBar
series:
  - entity: sensor.cpu_usage
    name: CPU
    min: 0
    max: 100
  - entity: sensor.memory_usage
    name: Memory
    min: 0
    max: 100
  - entity: sensor.disk_usage
    name: Disk
    min: 0
    max: 100
```

--------------------------------

### Integrate ApexCharts Card with Auto-Entities

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Shows how to use the ApexCharts card in conjunction with the `auto-entities` card to dynamically generate charts based on entity filters. This requires the `auto-entities` card to be installed separately.

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

--------------------------------

### Multiple Series with Different Chart Types

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Configures multiple entities with different visualization types (line, area, column) on the same chart. This example displays outdoor temperature, indoor temperature, and humidity, with specific styling and data grouping for humidity.

```yaml
type: custom:apexcharts-card
graph_span: 24h
header:
  show: true
  title: Temperature & Humidity
  show_states: true
  colorize_states: true
series:
  - entity: sensor.outdoor_temperature
    name: Outdoor Temp
    type: line
    color: '#e74c3c'
    stroke_width: 2
  - entity: sensor.indoor_temperature
    name: Indoor Temp
    type: area
    color: '#3498db'
    opacity: 0.3
  - entity: sensor.humidity
    name: Humidity
    type: column
    color: '#2ecc71'
    group_by:
      func: avg
      duration: 1h
```

--------------------------------

### Configure Multiple Y-Axes with ApexCharts Card

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

This example illustrates setting up multiple y-axes for an ApexCharts card, allowing different series to be plotted against independent scales. Each y-axis is assigned a unique `id` for series mapping, and options like `opposite` can be used to position axes. The `all_series_config` applies common settings to all series.

```yaml
type: custom:apexcharts-card
graph_span: 20min
yaxis:
  - id: first
    decimals: 0
    apex_config:
      tickAmount: 4
  - id: second
    opposite: true
    decimals: 0
    apex_config:
      tickAmount: 4
all_series_config:
  stroke_width: 2
series:
  - entity: sensor.random0_100
    yaxis_id: first
  - entity: sensor.random_0_1000
    yaxis_id: second
  - entity: sensor.random0_100
    yaxis_id: first
    transform: 'return Number(x) + 30;'
  - entity: sensor.random0_100
    yaxis_id: first
    transform: 'return Number(x) - 30;'

```

--------------------------------

### Color Thresholds for Visual State Indication

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Applies dynamic colors based on value thresholds for visual state indication. This example sets different colors for the temperature sensor based on its value, ranging from blue for low temperatures to red for high temperatures.

```yaml
type: custom:apexcharts-card
experimental:
  color_threshold: true
series:
  - entity: sensor.temperature
    stroke_width: 2
    color_threshold:
      - value: 0
        color: blue
      - value: 15
        color: cyan
      - value: 20
        color: green
      - value: 25
        color: orange
      - value: 30
        color: red
```

--------------------------------

### Generate Custom Data with Data Generator

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Shows how to use the 'data_generator' option to create synthetic data or display future predictions. This example maps tide prediction times and heights from entity attributes into a format suitable for charting.

```yaml
type: custom:apexcharts-card
graph_span: 4d
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.tide_prediction
    data_generator: |
      return entity.attributes.times.map((time, index) => {
        return [new Date(time).getTime(), entity.attributes.heights[index]];
      });
```

--------------------------------

### Configure Statistics Options for Data Aggregation

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Defines how historical data is aggregated for display. Options include 'type' (mean, max, min, etc.), 'period' (5minute, hour, day, etc.), and 'align' (start, end, middle) for data point alignment within periods. This is crucial for analyzing trends over time.

```yaml
statistics:
  type: mean
  period: hour
  align: middle
```

--------------------------------

### Using Config Templates in ApexCharts Card

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Demonstrates how to define and apply configuration templates in ApexCharts Card. Templates help avoid repetition by allowing you to define common configurations and reuse them across multiple cards. You can also overload parameters within a template.

```yaml
type: custom:apexcharts-card
config_templates:
  - template1
  - template2
# or
type: custom:apexcharts-card
config_templates: template1
```

```yaml
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:
      [...]
```

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

--------------------------------

### Define Reusable Configuration Templates

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Illustrates the use of 'apexcharts_card_templates' to define reusable configurations that can be applied to multiple cards. This reduces repetition by setting common options like graph span, header settings, and series configurations.

```yaml
# In your dashboard YAML (top-level)
apexcharts_card_templates:
  energy_graph:
    graph_span: 24h
    header:
      show: true
      show_states: true
    all_series_config:
      stroke_width: 2
      type: area
      opacity: 0.3
      group_by:
        func: avg
        duration: 30min

# Card using template
type: custom:apexcharts-card
config_templates: energy_graph
header:
  title: Power Consumption
series:
  - entity: sensor.grid_power
  - entity: sensor.solar_power
    invert: true
```

--------------------------------

### Apply Common Configuration to All Series

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Shows how to use 'all_series_config' to apply common settings to all series in the chart, such as stroke width, curve type, and data grouping. This simplifies configuration when multiple series share similar visual properties.

```yaml
type: custom:apexcharts-card
graph_span: 12h
all_series_config:
  stroke_width: 2
  curve: smooth
  type: line
  float_precision: 1
  group_by:
    func: avg
    duration: 15min
  show:
    extremas: true
series:
  - entity: sensor.temperature_1
    name: Sensor 1
    color: '#e74c3c'
  - entity: sensor.temperature_2
    name: Sensor 2
    color: '#3498db'
  - entity: sensor.temperature_3
    name: Sensor 3
    color: '#2ecc71'
```

--------------------------------

### Pass ApexCharts Native Configuration

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Explains how to pass configuration options directly to the underlying ApexCharts library using the 'apex_config' key. This allows for advanced customization of chart elements like height, tooltips, data labels, and axis formatting.

```yaml
type: custom:apexcharts-card
series:
  - entity: sensor.temperature
apex_config:
  chart:
    height: 300px
    zoom:
      enabled: true
  tooltip:
    enabled: true
    shared: true
  dataLabels:
    enabled: true
  stroke:
    curve: smooth
  xaxis:
    labels:
      datetimeFormatter:
        hour: HH:mm
  yaxis:
    labels:
      formatter: |
        EVAL:function(value) {
          return value.toFixed(1) + "°C";
        }
```

--------------------------------

### Configure ApexCharts Options (YAML)

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Demonstrates how to set ApexCharts options within the apexcharts-card configuration. This allows for extensive customization of chart appearance and behavior using the ApexCharts library's available options. Ensure that options already default in the card are not redefined in `apex_config` to avoid conflicts.

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

--------------------------------

### Add ApexCharts Card Resource Reference (YAML)

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

This snippet shows how to add a reference to the apexcharts-card.js file in your Home Assistant configuration.yaml file when using YAML mode for Lovelace configuration. It specifies the URL and type of the resource.

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

--------------------------------

### Configure Header Options for Chart Title and Actions

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Customizes the chart header, including its visibility ('show'), title text ('title'), and interactive actions ('title_actions'). Options like 'floating', 'show_states', 'colorize_states', 'standard_format', and 'disable_actions' provide fine-grained control over the header's appearance and behavior.

```yaml
header:
  show: false
  title: My Chart Title
  title_actions:
    # ... actions definition
  floating: false
  show_states: false
  colorize_states: false
  standard_format: false
  disable_actions: false
```

--------------------------------

### Configure 'group_by' Options for Data Bucketing

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Groups data points into buckets for aggregation. 'func' specifies the aggregation function (e.g., raw, mean, diff), 'duration' defines the bucket size, and 'fill' handles missing values (last, zero, null). 'start_with_last' is useful for difference calculations.

```yaml
group_by:
  func: mean
  duration: 1h
  fill: last
  start_with_last: false
```

--------------------------------

### Applying Settings to All Series in ApexCharts Card

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Shows how to use the `all_series_config` option in ApexCharts Card to apply common settings to all defined series. This reduces redundancy when multiple series share the same configuration parameters like stroke width, type, transform, or unit.

```yaml
- 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
```

```yaml
- 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
```

--------------------------------

### Configure Main Display Options

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Controls the main display elements of the chart. 'loading' shows a spinner during data updates, 'last_updated' displays the last update time, and 'version' shows the card version for debugging. These options enhance user experience and aid in troubleshooting.

```yaml
show:
  loading: true
  last_updated: false
  version: false
```

--------------------------------

### Enable Brush Chart for Time Selection

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Demonstrates how to enable an interactive brush chart at the bottom of the card for time range selection. This feature allows users to zoom into specific periods of the data.

```yaml
type: custom:apexcharts-card
experimental:
  brush: true
graph_span: 24h
brush:
  selection_span: 2h
  apex_config:
    chart:
      height: 80
series:
  - entity: sensor.temperature
    stroke_width: 2
  - entity: sensor.temperature
    show:
      in_chart: false
      in_brush: true
    stroke_width: 1
```

--------------------------------

### Transform Sensor Data with JavaScript Expressions

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Demonstrates how to use the 'transform' option to modify raw sensor values using JavaScript expressions before they are displayed on the chart. This includes converting binary sensors to numeric values, scaling sensor readings, and performing complex calculations involving other entities.

```yaml
type: custom:apexcharts-card
series:
  # Convert binary sensor to numeric
  - entity: binary_sensor.motion
    transform: "return x === 'on' ? 1 : 0;"

  # Scale sensor values
  - entity: sensor.bandwidth_bits
    name: Bandwidth (Mbps)
    transform: "return x / 1000000;"
    unit: Mbps

  # Complex transformation with other entities
  - entity: sensor.power_watts
    transform: "return x * hass.states['sensor.electricity_price'].state;"
    unit: cost/hr
```

--------------------------------

### Apply Minimal Layout to ApexCharts Card (YAML)

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Demonstrates the 'minimal' layout option for the ApexCharts Card. This layout removes the default grid and axes, positioning the legend at the top. Further customization can be achieved using `apex_config`.

```yaml
type: custom:apexcharts-card
layout: minimal
series:
  - ...
apex_config:
  # Additional ApexCharts configurations can go here
```

--------------------------------

### Configure ApexCharts Card for Sections View (YAML)

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Illustrates how to configure the ApexCharts Card to align with Home Assistant's sections view grid. Setting `section_mode: true` ensures proper alignment. `grid_options` can be manually set to adjust card size within the section, but only when `section_mode` is enabled.

```yaml
type: custom:apexcharts-card
section_mode: true
grid_options:
  rows: 4 # default is 6
  columns: 6 # default is 12
```

--------------------------------

### Create Pie/Donut Chart with ApexCharts Card

Source: https://context7.com/romrider/apexcharts-card/llms.txt

Configures a donut chart to display power distribution from various sensors. It specifies the chart type, header title, and lists the entities to be included in the series.

```yaml
type: custom:apexcharts-card
chart_type: donut
header:
  show: true
  title: Power Distribution
series:
  - entity: sensor.kitchen_power
    name: Kitchen
  - entity: sensor.living_room_power
    name: Living Room
  - entity: sensor.bedroom_power
    name: Bedroom
```

--------------------------------

### Enable JavaScript Functions in ApexCharts Options (YAML)

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Shows how to use JavaScript functions within ApexCharts options by prefixing them with `EVAL:`. This enables dynamic data formatting and complex logic directly within the card configuration. Use this feature with caution as it bypasses safeguards.

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

--------------------------------

### Configure ApexCharts Card for Sections View (YAML)

Source: https://context7.com/romrider/apexcharts-card/llms.txt

This YAML configuration enables the 'sections_mode' for ApexCharts Card, allowing it to integrate with Home Assistant's sections view layout. It defines the grid dimensions (rows and columns) and includes a basic series configuration for a temperature sensor.

```yaml
type: custom:apexcharts-card
section_mode: true
grid_options:
  rows: 4
  columns: 6
series:
  - entity: sensor.temperature
```

--------------------------------

### ApexCharts Card `func` Options

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

These options define how the state history data is processed and aggregated for display in ApexCharts Card. They determine whether to show raw data, averages, minimums, maximums, or other statistical representations within each time bucket.

```yaml
raw
avg
min
max
last
first
sum
median
delta
diff
```

--------------------------------

### Series Options

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Configuration options for defining individual data series within an ApexCharts Card.

```APIDOC
## Series Options

This section details the configuration options available for each data series displayed in an ApexCharts Card.

### `series` Options

| Name | Type | Default | Since | Description |
|---|---|---|---|---|
| :white_check_mark: `entity` | string | | v1.0.0 | The `entity_id` of the sensor to display. |
| `attribute` | string | | v1.4.0 | Retrieves an attribute of the entity instead of its state. Increase `update_delay` if the chart doesn't reflect the last attribute value. |
| `name` | string | | v1.0.0 | Overrides the default name of the entity for the series. |
| `stack_group` | string | | v2.1.0 | Groups series with the same name when `stacked` is `true` and `type` is `column`. Requires unique series names due to a bug in apexcharts.js. |
| `color` | string | | v1.1.0 | Sets the color of the series. Accepts formats like `yellow`, `#aabbcc`, `rgb(128, 128, 128)`, or CSS variables. |
| `opacity` | number | `0.7` for `area`, `1` otherwise | v1.6.0 | Sets the opacity of the line or filled area (between 0 and 1). |
| `stroke_width` | number | `5` | v1.6.0 | Changes the width of the line. Applicable only for `area` and `line` types. |
| `stroke_dash` | number or array | `0` | v2.1.0 | Creates a dashed line. Higher numbers increase dash size. Arrays allow for more complex patterns. |
| `type` | string | `line` | v1.0.0 | Supported types: `line`, `area`, `column`. |
| `curve` | string | `smooth` | v1.0.0 | Defines the curve style: `smooth`, `straight`, `stepline`, `monotoneCubic`. |
| `extend_to` | boolean or string | `end` | v2.0.0 | Extends the line/area to the end of the chart (`end`), the current time (`now`), or disables extension (`false`). Only for `line` and `area` types. (Replaces deprecated `extend_to_end`). |
| `unit` | string | | v1.0.0 | Overrides the default unit of the sensor. |
| `float_precision` | number | `1` | v1.2.0 | Precision for displaying data in the legend and tooltip. Does not affect graph display. |
| `fill_raw` | string | `'null'` | v1.5.0 | Fills missing history values with `last`, `zero`, or `null`. Applied before `group_by`. |
| `group_by` | object | | v1.0.0 | See [group_by](#group_by-options). |
| `invert` | boolean | `false` | v1.2.0 | Negates the data values (e.g., `1` becomes `-1`). Useful for comparing opposite values. |
| `transform` | string | | v1.5.0 | Applies transformations to raw data. See [transform](#transform-option). |
| `data_generator` | string | | v1.2.0 | See [data_generator](#data_generator-option). |
| `statistics` | object | | v2.0.0 | Utilizes Home Assistant statistical data (long-term). See [statistics](#statistics-options). |
| `offset` | string | | v1.3.0 | Series-level offset, useful for comparing data from different time periods (e.g., yesterday vs. today). Tooltip and x-axis display might be inaccurate. Accepts negative time strings (e.g., `-1h`, `-1d`). |
| `time_delta` | string | | v2.0.0 | Applies a time delta to data points after fetching, can be combined with `offset`. Accepts positive or negative time strings (e.g., `-30min`, `+2h`). |
| `min` | number | `0` | v1.4.0 | Minimum value for `radialBar` charts, used for percentage conversion. |
| `max` | number | `100` | v1.4.0 | Maximum value for `radialBar` charts, used for percentage conversion. |
| `color_threshold` | object | | v1.6.0 | See [experimental](#experimental-features). |
| `yaxis_id` | string | | v1.9.0 | Associates the series with a specific y-axis when using multi-y-axis. See [yaxis](#yaxis-options-multi-y-axis). |
| `show` | object | | v1.3.0 | See [serie's show options](#series-show-options). |
| `header_actions` | object | | v1.10.0 | See [header_actions](#header_actions-or-title_actions-options). |

**Note:** The `extend_to_end` option is deprecated since v2.0.0 and replaced by `extend_to`.
```

--------------------------------

### Multiple ApexCharts Card Graph Types and Data Aggregation

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Demonstrates how to display multiple series with different graph types (line, column) and aggregate data over specified durations using functions like 'avg'. This allows for visualizing and summarizing sensor data effectively.

```yaml
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
```

--------------------------------

### Configure Header and Title Actions in ApexCharts Card

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Define interactive actions for header and title elements within ApexCharts Card. Supports tap, hold, and double-tap gestures, allowing for actions like displaying more information, toggling entities, calling services, navigating, or opening URLs. Service calls can include specific data and confirmation prompts.

```yaml
type: custom:apexcharts-card
series:
  - entity: sensor.humidity
    header_actions:
      tap_action:
        action: call-service
        service: homeassistant.update_entity
        service_data: 
          entity_id: sensor.humidity
        confirmation:
          title: Update Humidity
          text: Are you sure you want to update the humidity sensor?
```

```yaml
type: custom:apexcharts-card
series:
  - entity: light.living_room
    title_actions:
      double_tap_action:
        action: navigate
        navigation_path: "/lovelace/0/"
      hold_action:
        action: url
        url_path: "https://www.google.com"
```

--------------------------------

### Configure Confirmation Dialog for Actions

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Enables a confirmation dialog before executing an action. The 'text' option sets the message displayed, and 'exemptions' allows specifying users who bypass the confirmation. This is useful for critical actions to prevent accidental execution.

```yaml
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
```

--------------------------------

### ApexCharts Card Data Aggregation Functions (AVG, MIN, MAX, LAST, FIRST)

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Shows how to aggregate sensor data using various functions (average, minimum, maximum, last, first) over a specified duration. This is useful for analyzing trends and statistical properties of sensor readings.

```yaml
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
```

--------------------------------

### Configure 'Now' Marker for Current Time Indicator

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Adds a vertical marker to the graph indicating the current time. Options include 'show' to enable/disable the marker, 'color' to set its appearance, and 'label' for custom text. The marker's position updates with card refreshes.

```yaml
now:
  show: true
  color: "var(--primary-color)"
  label: Current Time
```

--------------------------------

### ApexCharts Card: Modify Line Thickness (Global and Selective)

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Demonstrates two methods for adjusting line thickness in ApexCharts: applying a uniform thickness to all series using `all_series_config` or specifying individual thicknesses for each series.

```yaml
# Change all lines' thickness
type: custom:apexcharts-card
graph_span: 1d
all_series_config:
  stroke_width: 2
series:
  - entity: sensor.temperature
  - entity: sensor.humidity
```

```yaml
# Selective line thickness modification
type: custom:apexcharts-card
graph_span: 1d
series:
  - entity: sensor.temperature
    stroke_width: 2
  - entity: sensor.humidity
    stroke_width: 6
```

--------------------------------

### ApexCharts Card: Compare Today's Data with Yesterday

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Configures the ApexCharts card to display current day's data alongside data from the previous day, offset by 24 hours. This facilitates direct comparison of historical and current trends.

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

--------------------------------

### Configure Series Display Options in ApexCharts Card

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Control the visibility and display format of series data in the chart, legend, and header. Options include showing legend values, formatting states as durations, displaying values in the header, and controlling chart visibility. Some options have experimental features or specific usage conditions.

```yaml
series:
  - entity: sensor.temperature
    legend_value: false
    as_duration: "minute"
    in_header: true
    datalabels: true
    in_chart: false
    hidden_by_default: true
    extremas: "min+time"
```

--------------------------------

### ApexCharts Card `chart_type` Options

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Specifies the visual representation of the data. Options include line charts for timelines, scatter plots for point clouds, and pie/donut charts for proportional representation. Radial bar charts are also available for percentage-based data.

```yaml
line
scatter
pie
donut
radialBar
```

--------------------------------

### Implement Brush Feature for Time Frame Selection in ApexCharts Card

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Adds an interactive brush chart at the bottom to select a time frame for the main chart. This experimental feature may cause visual glitches with column charts and can be compute-intensive with large datasets. All standard series features apply to the brush series, and it can have its own apex_config.

```yaml
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 series will show up in the brush
      in_brush: true
      # add this also if you want your series to only show up in the brush
      in_chart: false

```

--------------------------------

### Transform Sensor Data with JavaScript in ApexCharts Card

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

The 'transform' option in ApexCharts Card allows you to modify raw data from Home Assistant history using a JavaScript function. This is useful for converting states to numbers (e.g., binary sensors), applying custom scaling, or any other data manipulation. The function receives the state ('x'), the full Home Assistant object ('hass'), and the entity state object ('entity'), and should return a number, float, or null.

```yaml
type: custom:apexcharts-card
update_delay: 3s
update_interval: 1min
series:
  - entity: binary_sensor.heating
    transform: "return x === 'on' ? 1 : 0;"
  - entity: sensor.bandwidth
    transform: "return x / 1024;"
```

--------------------------------

### ApexCharts Card: Adjust Graph Height

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Explains how to customize the height of the ApexCharts graph using the `apex_config` option, referencing the ApexCharts.js documentation for further customization possibilities.

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

--------------------------------

### Configure Color Threshold for ApexCharts Card Series

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Enables custom coloring of chart series based on data point values. This experimental feature supports radialBar, line, pie, and donut chart types. It may affect tooltip colors, column rendering, and apex_config.fill options. Specific behaviors apply to column and area chart types regarding color application and gradients.

```yaml
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 series
        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

```

--------------------------------

### Generate Custom Data Series with JavaScript in ApexCharts Card

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

The 'data_generator' option in ApexCharts Card provides an advanced way to create custom data series directly from an entity's attributes, bypassing the standard history retrieval. It requires a JavaScript function that returns an array of [timestamp, value] pairs. The function has access to the entity object, graph start/end times, the 'hass' object, and the Moment.JS library for date manipulation.

```yaml
type: custom:apexcharts-card
graph_span: 4d
span:
  start: hour
series:
  - entity: sensor.test
    data_generator: |
      return entity.attributes.PeakTimes.map((peak, index) => {
        return [new Date(peak).getTime(), entity.attributes.PeakHeights[index]];
      });
```

--------------------------------

### Set Series to be Hidden by Default in ApexCharts Card

Source: https://github.com/romrider/apexcharts-card/blob/master/README.md

Allows specific series to be hidden when the chart initially loads. This experimental feature requires all series to have unique names and may impact auto-scaling and auto-column width features. It simulates the effect of clicking a legend item to disable a series.

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

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.