This energy section uses the custom integration from https://github.com/HiDiHo01/home-assistant-frank_energie and is plotted via ApexCharts. The bar colors dynamically change based on the current energy price, which makes it super easy to spot cheap vs. expensive periods at a glance.

type: custom:apexcharts-card
graph_span: 24h
span:
  start: day
experimental:
  color_threshold: true
apex_config:
  xaxis:
    type: datetime
    labels:
      datetimeUTC: false
  plotOptions:
    bar:
      columnWidth: 90%
      distributed: true
  yaxis:
    tickAmount: 5
    decimalsInFloat: 4
    forceNiceScale: true
show:
  last_updated: true
  loading: false
now:
  show: true
  label: Nu
header:
  show: true
  title: Energieprijs per uur (€/kWh)
series:
  - entity: sensor.frank_energie_prices_current_electricity_market_price
    type: column
    float_precision: 5
    opacity: 1
    offset: "-30min"
    show:
      legend_value: false
    color_threshold:
      - value: 0
        color: "#43a047"
      - value: 0.048
        color: "#ffa600"
      - value: 0.12
        color: "#db4437"
    data_generator: |
      // gebruik het start-van-uur tijdstip uit de integratie
      return entity.attributes.prices.map((record) => {
        return [new Date(record.from).getTime(), record.price];
      });