HA - YAML - Apex chart with hourly energy price and consumption

type: custom:apexcharts-card
apex_config:
  xaxis:
    type: datetime
    tickAmount: 24
    tickPlacement: between
    labels:
      format: HH
      hideOverlappingLabels: false
      rotate: -90
      rotateAlways: true
      showDuplicates: true
      style:
        fontFamily: Courier New
        fontWeight: 545
        fontSize: 12px
    axisBorder:
      show: true
      color: grey
    tooltip:
      enabled: false
  plotOptions:
    bar:
      dataLabels:
        offsetY: -10
        position: bottom
        maxItems: 32
        hideOverflowingLabels: true
        orientation: vertical
      columnWidth: 90%
  chart:
    type: bar
    height: 350px
    stacked: false
    distributed: false
  dataLabels:
    enabled: true
    style:
      colors:
        - "#fcfcfc"
      fontSize: 10px
    distributed: true
    offsetY: 3
    formatter: |
      EVAL:function(value) {
        return Math.abs(value.toFixed(2));
      }
  tooltip:
    x:
      format: HH
    "y":
      formatter: |
        EVAL:function(value) {
          return Math.abs(value.toFixed(2));
        }
experimental:
  color_threshold: true
now:
  show: true
  label: Nu
graph_span: 23h
span:
  start: day
yaxis:
  - id: kwh
    decimals: 1
    opposite: true
    apex_config:
      axisBorder:
        show: true
        color: grey
      tickAmount: 5
      reversed: false
      title:
        text: Forbrug i kWh
      labels:
        show: true
  - id: kr
    min: 0
    max: 5
    decimals: 1
    apex_config:
      axisBorder:
        show: true
        color: grey
      tickAmount: 5
      reversed: false
      title:
        text: Pris i kr. / kWh
      labels:
        show: true
show:
  last_updated: false
header:
  show: true
  title: Elpriser og forbrug pr. time
  standard_format: true
series:
  - entity: sensor.energi_data_service
    type: column
    name: Pris
    yaxis_id: kr
    data_generator: |
      var today = entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
      });
      return today;
    float_precision: 2
    color_threshold:
      - value: 0
        color: green
      - value: 2
        color: orange
      - value: 3.5
        color: red
      - value: 5
        color: darkred
    extend_to: now
    show:
      extremas: false
      datalabels: true
      in_legend: false
  - entity: sensor.kamstrup_total_import_filter
    name: Forbrug
    type: area
    unit: kWh
    float_precision: 2
    stroke_width: 4
    yaxis_id: kwh
    color: 2980b9
    group_by:
      func: diff
      duration: 1hour
    extend_to: now
    show:
      datalabels: false
      in_legend: false