Apexcharts card code

[KristjanKalder]

This is not an issue

You have included a really nice version of ApexCharts card in your readme.
Can someone share sample code for something like that?
I'm struggling to find a way to color the bars based on highs and lows.
The highest and lowest tooltips are nice also.

Thanks!

[sonite]

Certainly! Your selection of graph design is impressive. Would you be willing to share it with us?

[jluyten]

Please? :-)

[sonite]

You have to install config-template-card as well. I solved it this way:

type: custom:config-template-card
variables:
  - '"sensor.nordpool_kwh_se3_sek_4_10_0"'
  - Number(states['sensor.nordpool_kwh_se3_sek_4_10_0'].state)
  - >-
    String('Current price ' + states['sensor.nordpool_kwh_se3_sek_4_10_0'].state
    + ' kr/kWh')
  - Number(states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.average)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min) / 4) * 0) +
    Number(states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min) / 4) * 1) +
    Number(states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min) / 4) * 2) +
    Number(states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min) / 4) * 3) +
    Number(states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min)
  - states['sensor.nordpool_kwh_se3_sek_4_10_0'].state
entities: ${vars[0]}
card:
  type: custom:apexcharts-card
  graph_span: 36h
  hours_12: false
  experimental:
    color_threshold: true
  header:
    title: ${vars[2]}
    show: true
  span:
    start: day
  now:
    show: true
    label: ${String(vars[8])}
  series:
    - entity: ${vars[0]}
      type: column
      color: grey
      float_precision: 3
      data_generator: >
        return (entity.attributes.raw_today.map((start, index) => { 

        return [new Date(start["start"]).getTime(),
        entity.attributes.raw_today[index]["value"]]; 

        })).concat(entity.attributes.raw_tomorrow.map((start, index) => { return
        [new Date(start["start"]).getTime(),
        entity.attributes.raw_tomorrow[index]["value"]]; }));
      show:
        extremas: true
      color_threshold:
        - value: ${vars[4]}
          color: '#42a047'
        - value: ${vars[5]}
          color: '#ffa600'
        - value: ${vars[6]}
          color: '#ff7100'
        - value: ${vars[7]}
          color: '#db4437'
  yaxis:
    - decimals: 4
  apex_config:
    tickAmount: 10
    annotations:
      yaxis:
        - 'y': ${vars[3]}
          borderColor: '#00E396'
          borderWidth: 2
          label:
            text: mean

[gijs007]

Thanks, this works nicely.
Is it possible to change the Yaxis: to 1. include the currency symbol (e.g. €) and 2. make it use comma's instead of points as a decimal separator?

[Dan1jel]

You have to install config-template-card as well. I solved it this way:

type: custom:config-template-card
variables:
  - '"sensor.nordpool_kwh_se3_sek_4_10_0"'
  - Number(states['sensor.nordpool_kwh_se3_sek_4_10_0'].state)
  - >-
    String('Current price ' + states['sensor.nordpool_kwh_se3_sek_4_10_0'].state
    + ' kr/kWh')
  - Number(states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.average)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min) / 4) * 0) +
    Number(states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min) / 4) * 1) +
    Number(states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min) / 4) * 2) +
    Number(states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min) / 4) * 3) +
    Number(states['sensor.nordpool_kwh_se3_sek_4_10_0'].attributes.min)
  - states['sensor.nordpool_kwh_se3_sek_4_10_0'].state
entities: ${vars[0]}
card:
  type: custom:apexcharts-card
  graph_span: 36h
  hours_12: false
  experimental:
    color_threshold: true
  header:
    title: ${vars[2]}
    show: true
  span:
    start: day
  now:
    show: true
    label: ${String(vars[8])}
  series:
    - entity: ${vars[0]}
      type: column
      color: grey
      float_precision: 3
      data_generator: >
        return (entity.attributes.raw_today.map((start, index) => { 

        return [new Date(start["start"]).getTime(),
        entity.attributes.raw_today[index]["value"]]; 

        })).concat(entity.attributes.raw_tomorrow.map((start, index) => { return
        [new Date(start["start"]).getTime(),
        entity.attributes.raw_tomorrow[index]["value"]]; }));
      show:
        extremas: true
      color_threshold:
        - value: ${vars[4]}
          color: '#42a047'
        - value: ${vars[5]}
          color: '#ffa600'
        - value: ${vars[6]}
          color: '#ff7100'
        - value: ${vars[7]}
          color: '#db4437'
  yaxis:
    - decimals: 4
  apex_config:
    tickAmount: 10
    annotations:
      yaxis:
        - 'y': ${vars[3]}
          borderColor: '#00E396'
          borderWidth: 2
          label:
            text: mean

Trying to add this to my HA but it don't work. Do you have maybe an updated version to work with latest Nordpool integration?