Source: https://cards.flixlix.com/energy-period-selector-plus/examples

Energy Period Selector Plus

# Examples

Copy-pastable configs for the most common setups, each next to the card it draws.

## On a card

The default buttons, on a card background.

```yaml
type: custom:energy-period-selector-plus
card_background: true
```

## Icons, compare and custom periods

A title, icon buttons for today and compare, and only month, year and custom ranges.

```yaml
type: custom:energy-period-selector-plus
card_background: true
title: Energy period
today_button_type: icon
compare_button_type: icon
period_buttons: [month, year, custom]
```

## Pick any range from the date

With `date_picker`, clicking the date opens HA's calendar in every period, not only in `custom`.

```yaml
type: custom:energy-period-selector-plus
card_background: true
date_picker: true
period_buttons: [day, week, month, year, custom]
```

## With Energy Flow Card Plus

Stack it above an [Energy Flow Card Plus](https://cards.flixlix.com/energy-flow-card-plus) that follows the picked period with `energy_date_selection: true`.

```yaml
type: vertical-stack
cards:
  - type: custom:energy-period-selector-plus
    card_background: true
  - type: custom:energy-flow-card-plus
    energy_date_selection: true
    entities:
      grid:
        entity:
          consumption: sensor.grid_consumption
          production: sensor.grid_production
      solar:
        entity: sensor.solar_energy
```

Try it live

Try these options in the [playground](https://cards.flixlix.com/energy-period-selector-plus/playground), with an Energy Flow Card Plus following the period you pick.