ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
3445

Fiddeling with the code provided by @M4tthijs over at: https://community.home-assistant.io/t/dynamic-color-threshold-for-apexcharts/610838/3 i’ve manage to solve my own question with the following code-snippet:

type: custom:config-template-card
variables:
  - '"sensor.nordpool_kwh_se3_sek_3_10_0"'
  - Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].state)
  - >-
    String('Current price ' + states['sensor.nordpool_kwh_se3_sek_3_10_0'].state
    + ' kr/kWh')
  - Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.average)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min) / 4) * 0) +
    Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min) / 4) * 1) +
    Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min) / 4) * 2) +
    Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min)
  - >-
    (((states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.max -
    states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min) / 4) * 3) +
    Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min)
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: Now
  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: 2
  apex_config:
    tickAmount: 10
...
1 Like