ApexCharts card - A highly customizable graph card

AleXSR700 · October 28, 2022, 7:27am

I’m trying to customize the name of each auto-entities generated series using config-template-card, but my attempts all failed.
Does anybody know if my placement of code is wrong or if the syntax for area_name is wrong?
If I replace
name: area_name('this.entity_id') or name: {{ area_name('this.entity_id') }}
with
name: states['input_select.days_back_to_show'].state+'d'
I do get the name changed. But it is of course not series-linked, so this means little apart from Apex Charts supports templates in the name.

Relevant code (to not clutter the thread too much):

type: custom:config-template-card
entities:
  - input_select.days_back_to_show
variables:
  span: states['input_select.days_back_to_show'].state+'d'
  days: |
    -states['input_select.days_back_to_show'].state+'d'+'1d'
  name: area_name('this.entity_id')
card:
  type: vertical-stack
  cards:
    - type: custom:auto-entities
      sort:
        method: friendly_name
      filter:
        include:
          - entity_id: sensor.xiaomi_humidity_*
            options:
              name: ${name}

Also tried putting the template directly into the name field, but that failed also.

nikop · October 28, 2022, 11:52am

As this thread is about ApecCharts card, I suggest you ask your config template card -specific question also in the “official” 100% Templatable Lovelace Configurations thread.

MicheleMercuri · October 28, 2022, 12:01pm

@RomRider many thanks for your great work.

here one of my graph

type: custom:config-template-card
entities:
  - sensor.a_b_line_voltage
  - sensor.internal_temperature
  - sensor.input_power
  - sensor.sunrise
  - sensor.sunset
  - sensor.solar_noon
card:
  type: custom:apexcharts-card
  experimental:
    color_threshold: true
  header:
    show: true
    show_states: true
    colorize_states: true
    title: PV Power and Grid Voltage Today
  graph_span: 14h
  span:
    start: day
    offset: +5.5h
  apex_config:
    annotations:
      position: back
      yaxis:
        - 'y': 253
          strokeDashArray: 2
          borderColor: '#FFFF00'
          borderWidth: 0.5
          label:
            borderColor: '#ADFF2F'
            borderWidth: 0
            borderRadius: 0
            text: 253V
            textAnchor: center
            position: right
            offsetX: -35
            offsetY: 2
            style:
              background: transparent
              color: '#FFFF00'
              fontSize: 10px
              fontWeight: 10
              fontFamily: Segoe UI
              cssClass: apexcharts-xaxis-annotation-label
        - 'y': 264.5
          strokeDashArray: 2
          borderColor: '#FF4500'
          borderWidth: 0.5
          label:
            borderColor: '#ADFF2F'
            borderWidth: 0
            borderRadius: 0
            text: 264.5V
            textAnchor: center
            position: right
            offsetX: -35
            offsetY: 1
            style:
              background: transparent
              color: '#FF8C00'
              fontSize: 10px
              fontWeight: 10
              fontFamily: Segoe UI
              cssClass: apexcharts-xaxis-annotation-label
      xaxis:
        - x: ${new Date(states['sensor.sunrise'].state).getTime()}
          strokeDashArray: 0.5
          label:
            text: ☀️
            orientation: orizontal
            borderWidth: 0
            style:
              background: '#0000'
              fontSize: 15px
            offsetY: 135
        - x: ${new Date(states['sensor.solar_noon'].state).getTime()}
          strokeDashArray: 0.5
          borderColor: trasparent
          label:
            text: ☀️
            orientation: orizontal
            borderWidth: 0
            style:
              background: '#0000'
              fontSize: 15px
            offsetY: 0
        - x: ${new Date(states['sensor.sunset'].state).getTime()}
          strokeDashArray: 0.5
          label:
            text: 🌙
            orientation: orizontal
            borderWidth: 0
            style:
              color: '#fff'
              fontSize: 15px
              background: '#0000'
            offsetY: 135
    chart:
      type: area
    stroke:
      show: true
    dataLabels:
      enabled: true
    legend:
      show: false
    grid:
      show: false
    yaxis:
      - seriesName: 1
        show: true
        forceNiceScale: true
        opposite: true
        decimalsInFloat: 0
      - seriesName: 2
        show: true
        forceNiceScale: true
        opposite: false
        decimalsInFloat: 0
      - seriesName: 3
        show: false
        forceNiceScale: true
        opposite: false
        decimalsInFloat: 0
      - seriesName: 4
        show: false
        forceNiceScale: true
        opposite: false
        decimalsInFloat: 0
  all_series_config:
    stroke_width: 1
    group_by:
      func: last
      duration: 5m
    curve: smooth
    type: area
  series:
    - entity: sensor.a_b_line_voltage
      color: white
      extend_to: now
      name: Grid V
      unit: V
      float_precision: 2
      group_by:
        func: last
      show:
        in_header: true
        in_chart: true
        datalabels: false
      stroke_width: 1
      color_threshold:
        - value: 0
          color: white
          opacity: 1
        - value: 253
          color: white
          opacity: 0
    - entity: sensor.input_power
      color: green
      extend_to: now
      name: PV Power
      transform: return x / 1000;
      unit: kW
      float_precision: 2
      show:
        in_header: true
        in_chart: true
        datalabels: false
      color_threshold:
        - value: 0
          color: green
          opacity: 0.5
        - value: 1.5
          color: limegreen
          opacity: 0.4
        - value: 2.5
          color: lightgreen
          opacity: 0.3
        - value: 3.5
          color: springgreen
          opacity: 0.2
    - entity: sensor.internal_temperature
      color: red
      extend_to: now
      name: Inverter Temp.
      unit: °C
      float_precision: 2
      fill_raw: last
      show:
        extremas: max+time
        in_header: true
        in_chart: false
        datalabels: false

Immagine 2022-10-28 135530

AleXSR700 · October 29, 2022, 8:21pm

I am having trouble with this.entity_id and do not know if it is an apexcharts-card or config-template-card problem.
If anybody knows his way around this.entity_id , maybe you would take a look at it?

David_Nagy · October 29, 2022, 10:18pm

Thanks again for your answer, however, I managed to recreate the history card in apex.

It needed some helper and some statistic integration, but it works.

- type: custom:config-template-card
  variables:
    min_temp: parseFloat(states['sensor.six_hourly_min_temperature_living_room'].state)-0.5
    max_temp: parseFloat(states['sensor.six_hourly_max_temperature_living_room'].state)+0.5
  entities:
    - sensor.six_hourly_min_temperature_living_room
    - sensor.six_hourly_max_temperature_living_room
  card:
    type: custom:apexcharts-card
    graph_span: 6h
    header:
      show: true
      title: Living Room
      show_states: true
      colorize_states: true
    yaxis: # only 1 yaxis, no need for id or yaxis_id
      - min: ${min_temp}
        max: ${max_temp}
        apex_config:
          tickAmount: 4
    series:
      - entity: climate.thermostat_living_room
        attribute: current_temperature
        type: line
        stroke_width: 2
        name: Living Room Temperature
        group_by:
          func: max
          duration: 5min
      - entity: climate.thermostat_living_room
        attribute: temperature
        type: line
        stroke_width: 2
        name: Target Temperature
        group_by:
          func: max
          duration: 5min
      - entity: sensor.hvac_mode_living_room
        type: column
        group_by:
          func: max
          duration: 5min
        show:
          legend_value: false
          in_header: false
    apex_config:
      legend: { show: false }

#For getting the heating mode(red bars)
- name: "HVAC Mode Living Room"
  state: >-
    {% if is_state_attr("climate.thermostat_living_room","hvac_action","heating") %}
      {{state_attr("climate.thermostat_living_room","current_temperature")}}
    {% else %}
      {{ 0 }}
    {% endif %}

# For min max y axis value:
- name: "Max Temperature Living Room"
  state: >-
    {{ [state_attr("climate.thermostat_living_room","current_temperature"),
    state_attr("climate.thermostat_living_room","temperature")]|max}}

- name: "Min Temperature Living Room"
  state: >-
    {{ [state_attr("climate.thermostat_living_room","current_temperature"),
    state_attr("climate.thermostat_living_room","temperature")]|min}}

#Rolling min max for 6 hour
- platform: statistics
  name: "Six Hourly Max Temperature Living Room"
  entity_id: sensor.max_temperature_living_room
  state_characteristic: value_max
  max_age:
    hours: 6

- platform: statistics
  name: "Six Hourly Min Temperature Living Room"
  entity_id: sensor.min_temperature_living_room
  state_characteristic: value_min
  max_age:
    hours: 6

derSchreifritz · October 29, 2022, 11:16pm

hi
I want to create a scatter graph based on 2 sensors. I collect them with a 3rd template sensor once every so often, and want then to get out a point with one measurement on the x and one on the y axis. Can someone help me? (I don’t know much coding). Thanks!
edit: What I have so far:
the template to collect the 2 sources into 1:

- trigger:
    - platform: time_pattern
      hours: /12
      minutes: 1 
      seconds: 5
   sensor:  
    - name: cop 12 hourly vs temp
      unit_of_measurement: cop, °C
      state: >
             {{ (states('sensor.cop_12_hourly')|float(0))}}, {{ (states('sensor.average_temp_last_12hrs')|float(0)) }}

and my try:

type: custom:apexcharts-card
chart_type: scatter
apex_config:
  xaxis: numeric
series:
  - entity: sensor.cop_12_hourly_vs_temp
data_generator: |
  ???
xaxis: cop
yaxis: °C

How do I format this properly, as how to config xaxis and data_generator?
I got some hints at my topic below, but didn’t get through yet. Thanks.

lennardw · October 30, 2022, 3:26pm

Hi,

I have been fiddling for a few weeks now trying to figure it out myself, but I really can’t get it working. Can anyone please help me?
I have a ‘Zonneplan One’ device that provides a number of sensors for ‘future power price’ (so the energy-price for the following hours). It provides 8 sensors in total. "price in 1 hour, in 2 hours, etc.

I consolidated the sensors in one template sensor:

I want to get a bar-graph that puts these items next to each other (preferably auto-scaled, starting with 0,00, so it has some ‘body’). If at all possible, it would also be nice if it would show the ‘hour’ of the given value. I haven’t managed to get that working too.

So suppose it’s 13:30 now, so the ‘next hour’ starts at ‘14:00’, it would be nice if it said so.

derSchreifritz · October 30, 2022, 6:04pm

sorry I can’t help with your specific goal. Did you look at alternatives? For me the nordpool custom component works well, with a template for the additional cost of the provider and up to 35 hours in advance.

Gussir · October 30, 2022, 6:33pm

Hello, anyone knows if “dots” as series type is or will be supported?

nikla · October 31, 2022, 7:35pm

You have done what I have look for the last few weeks. Looks really good.
Is it possible for you to share your hourly energy usage graph?

/Niklas

tvds · November 1, 2022, 8:14am

First of all, your card is absolutely great! Many thanks for all the hard work
Would it be possible to have a faded fill?
Now I just have the opacity putted on a specific value.

But I would like to have the fill faded like this …

Is there an easy way to do this?
Many thanks

lennardw · November 1, 2022, 4:00pm

Thanks for looking anyway

XeleX · November 1, 2022, 4:04pm

It looks great! Could you please share the configuration for apexchart?

Lunkobelix · November 1, 2022, 6:17pm

Yes, it is possible. Mine is very soft but if you look closely it is gradient

apex_config:
  fill:
    type: gradient
    gradient:
      type: vertical
      shadeIntensity: 0
      inverseColors: false
      opacityFrom: 0.3
      opacityTo: 0
      stops:
        - 0

edozat1 · November 1, 2022, 7:38pm

Solved by changing the state_class from total_increasing to total

tvds · November 1, 2022, 9:07pm

Many thanks! That did the trick really appreciate your support !

joriws · November 1, 2022, 9:28pm

This made it work for me, I created two const but maybe one could have been created live on main return

    data_generator: |
      const today = entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]]
      });
      const tomor = entity.attributes.raw_tomorrow.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]]
      });
      return ([...today, ...tomor])

joriws · November 1, 2022, 9:29pm

And the output after experimenting the fix…

moelito · November 1, 2022, 10:56pm

Sure, no problem.
It seems to be sensitive to hiding things dynamically in the graph (ie using the graph legend). No clue why but not a real issue.
Here is the config for the stacked hourly graph:

type: custom:apexcharts-card
graph_span: 1day
stacked: true
span:
  end: hour
header:
  show: true
  title: Hourly Energy Usage
  show_states: false
  colorize_states: true
all_series_config:
  type: column
  float_precision: 3
  transform: return x * 1000;
  unit: Wh
  opacity: 0.7
  group_by:
    func: last
    duration: 1h
apex_config:
  legend:
    position: right
series:
  - entity: sensor.computer_desk_hourly_energy
    name: Workdesk
  - entity: sensor.washing_machine_hourly_energy
    name: Washingm
  - entity: sensor.dishwasher_hourly_energy
    name: Dishw
  - entity: sensor.fridge_and_freezer_hourly_energy
    name: Freezer
  - entity: sensor.heatpump_hallway_hourly_energy
    name: Heat Ds
  - entity: sensor.heatpump_livingroom_hourly_energy
    name: Heat us
  - entity: sensor.it_network_hourly_energy
    name: IT Netw
  - entity: sensor.kitchen_media_hourly_energy
    name: Kitchen media
  - entity: sensor.media_bench_hourly_energy
    name: Livingr meadia
  - entity: sensor.ps4_setup_hourly_energy
    name: PS4 setup
  - entity: sensor.drying_machine_hourly_energy
    name: Dryer
  - entity: sensor.kitchen_radiator_hourly_energy
    name: Kitchen Radiator
  - entity: sensor.unknown_energy_hourly
    name: Other

nikla · November 2, 2022, 4:51am

Thanks a lot! I will try it out later today.

I see that you have a sensor called sensor.unknown_energy_hourly. How have you defined this one?