ApexCharts card - A highly customizable graph card

jazzmonger · December 13, 2021, 8:48pm

I have an Oven Entity I’m trying to graph where there are several attributes. Basically I want the “set” temp ‘temperature’ and current temp ‘current_temperature’ graphed over the past 4 hours. I can’t find a way to add 2 attributes to a graph… one works fine.

type: custom:apexcharts-card
graph_span: 4h
all_series_config:
  stroke_width: 2
header:
  show: true
  title: Current Oven Temp
  show_states: true
  colorize_states: true
series:
  - entity: water_heater.oven
    attribute: 
     current_temperature

these are my attributes of my oven entity (why its a water_heater.oven entity is beyond me)

water_heater.oven:

min_temp: 170
max_temp: 550
operation_list: Off, Conv. Multi-Bake, Convection Bake, Bake, Air Fry, Convection Roast
current_temperature: 338
temperature: 350
target_temp_high: null
target_temp_low: null
operation_mode: Bake
display_state: Bake
probe_present: false
display_temperature: 350
raw_temperature: 338
cook_time_elapsed: 0:08
icon: mdi:stove
friendly_name:  Oven
supported_features: 3

Update: For those having the same question, RomRider’s suggestion works great:

type: custom:apexcharts-card
graph_span: 4h
all_series_config:
  stroke_width: 2
header:
  show: true
  title: Current Oven Temp
  show_states: true
  colorize_states: true
series:
  - entity: water_heater.oven
    attribute: current_temperature
  - entity: water_heater.oven
    attribute: temperature

Jeff

roytolsen · December 14, 2021, 9:13am

Hi! I tried searching for it, but I can’t find the right stacked type setup for what I want.
I’m trying to replicate something like this, to get a view per hour what device consumed most energy:

Any helpful hints?

RomRider · December 14, 2021, 2:56pm

Add a second serie with the same entity and the second attribute.

Not sure I get the question but…

type: custom:apexcharts-card
stacked: true
series:
  - entity: abc
    type: column
  - entity: efg
    type: column

martinst · December 15, 2021, 7:30pm

Thanks for that tip. It works and yes it is not showed in the datalabels (so I have hide them there).

But I have still one issue. I have the option as_duration set to hour.

What I actually want is to have only display: …h …m

So only the hours and minutes and no seconds and no milliseonds.

Is that possible?

chart

csacca · December 16, 2021, 2:35am

First, thank you for a fantastic card! In not much time at all I was able to setup some nice figures.

I was wondering if anyone has figured out how to do custom annotations? I would like to create a graph like this one where wind direction is plotted as an annotation on top of wind speed:

Based on this example, something like that should be possible in the base library, but I’m not sure it’s possible to do programmatic annotations like that through the card. Anyone have any tricks or is this just feature request #209?

roytolsen · December 16, 2021, 6:30pm

Finally, I got it working!
Thanks @RomRider for an excellent card with great usability
This is what I got so far, total energy consumed on yellow line, breakdown on device level in stacked barchart.
Skjermbilde 2021-12-16 192051

Code here if wanted:

type: custom:apexcharts-card
graph_span: 1d
span:
  start: day
header:
  show: false
stacked: true
update_interval: 5min
all_series_config:
  type: column
  group_by:
    func: diff
    duration: 60min
series:
  - entity: sensor.accumulated_consumption_skjelinveien_12a
    type: line
    extend_to_end: false
    name: Total
    group_by:
      func: diff
      duration: 60min
  - entity: sensor.energiforbruk_vvb
    name: VVB
  - entity: sensor.energiforbruk_vp
    name: Varmepumpe
  - entity: sensor.energiforbruk_varme_vaskerom
    name: Varme vaskerom

CumpsD · December 18, 2021, 6:10pm

type: custom:config-template-card
view_layout:
  grid-area: body1
entities:
  - sensor.helium_wallet_today
card:
  type: custom:apexcharts-card
  header:
    show: true
    show_states: true
    colorize_states: true
    title: Helium Mined Today
  span:
    start: day
  graph_span: 24h
  all_series_config:
    stroke_width: 2
    type: line
    extend_to_end: false
    float_precision: 2
  color_list:
    - lightblue
    - grey
  series:
    - entity: sensor.helium_wallet_today
      name: Today
      yaxis_id: hnt
      type: area
      group_by:
        func: avg
        duration: 20min
    - entity: sensor.helium_wallet_today_value
      name: Today
      color: '#85BB65'
      show:
        in_header: true
        in_chart: false
    - entity: sensor.helium_wallet_today
      name: Yesterday
      offset: '-24h'
      opacity: 0.2
      yaxis_id: hnt
      group_by:
        func: avg
        duration: 20min
      show:
        in_header: true
    - entity: sensor.helium_wallet_today_value
      name: Yesterday
      color: '#85BB65'
      offset: '-24h'
      show:
        in_header: true
        in_chart: false
  apex_config:
    yaxis:
      - id: hnt
        seriesName: HNT
        decimalsInFloat: 2
    tooltip:
      x:
        format: ddd dd MMM - HH:mm
    xaxis:
      tooltip:
        enabled: false
    legend:
      show: false
    grid:
      borderColor: '#7B7B7B'
    chart:
      foreColor: '#7B7B7B'
      toolbar:
        show: false

Thomas_Gregg · December 18, 2021, 7:58pm

Thanks. I see you have sensor.helium_wallet_today as well as sensor.helium_wallet_today_value entities. Could you also share your configuration for these please?

tirelli · December 21, 2021, 10:21am

Hi there, I’m becoming crazy to find a way to plot in a graph the content of a simple csv file stored in a local folder. The structure of the file is simply two columns:

Timestamp Weight
yyyy-mm-dd hh:mm:ss value1
yyyy-mm-dd hh:mm:ss value2
… …

Is there a way to have a bar chart where the x-axis is simply a label (the first column in the file)?
Thank you!

RomRider · December 22, 2021, 6:31pm

You’ll need to use the file platform to create a sensor and then plot that sensor.

tirelli · December 22, 2021, 6:46pm

Yes, I did it but it uses the time as x-axis and not the timestamp stored into the file.

RomRider · December 22, 2021, 7:15pm

Well, I see. I guess there’s no solution unless you develop something yourself or replace the csv with a MQTT sensor for eg or use nodered to do that.

keex · December 26, 2021, 1:13pm

I’m having a problem with one series not showing up properly. It’s as if the line is drawn with 0 values. Any thoughts?
ezgif-7-4bc0369fcb

type: custom:apexcharts-card
header:
  show: true
  show_states: true
  colorize_states: true
apex_config:
  grid:
    show: false
  legend:
    show: false
  chart:
    height: 100px
  tooltip:
    shared: true
    marker:
      show: true
graph_span: 48h
span:
  start: day
yaxis:
  - id: price_chart
    opposite: true
    apex_config:
      tickAmount: 1
      labels:
        formatter: |
          EVAL:v => `€${v.toFixed(2)}`
  - id: hidden
    show: false
  - id: consumption
    apex_config:
      tickAmount: 1
      labels:
        formatter: |
          EVAL:v => `${v.toFixed(2)} kWh`
series:
  - entity: sensor.nordpool_api
    yaxis_id: price_chart
    type: column
    color: green
    float_precision: 4
    show:
      in_header: false
    data_generator: |
      return entity.attributes.ee.map((p, i) => {
        const price = p.price * 1.2 / 1000;
        const timestamp = p.timestamp * 1000;
        return [timestamp, price];
      })
  - entity: sensor.nordpool_price
    yaxis_id: hidden
    color: green
    float_precision: 4
    show:
      in_chart: false
  - entity: sensor.house_energy_cost
    name: Cost
    yaxis_id: hidden
    color: green
    float_precision: 2
    show:
      in_chart: false
  - entity: sensor.hourly_house_energy
    name: Consumption
    yaxis_id: consumption
    color: orange
    stroke_width: 3
    opacity: 0.5
    float_precision: 2
    curve: stepline
    extend_to_end: false
    show:
      in_header: false
    group_by:
      func: max
      duration: 1h
      fill: last
  - entity: sensor.house_power
    name: Consumption
    yaxis_id: hidden
    color: orange
    float_precision: 0
    show:
      in_chart: false

This is what I am going for, but instead of avg instant consumption in Watts I want to have actually consumed energy in kWh in my chart:

ngdaihoc · December 29, 2021, 9:15am

@RomRider
How to draw a line to describe average value within range 10 days

type: custom:apexcharts-card
update_interval: 10min
graph_span: 10d
span:
  end: day
  offset: +6m
header:
  show: true
  title: Home's Energy (kWh)
apex_config:
  chart:
    type: area
    height: 250
  stroke:
    show: true
    width: 1
    curve: smooth
  legend:
    show: false
  dataLabels:
        ..... 
  fill:
    type: gradient
    .....
series:
  - color: rgb(235,10,104)
    entity: sensor.energy_today
    .....
    group_by:
      func: max
      duration: 24h

please help me !!!

Actual currently

My desire
avg = (6.86 + 6.93 + 7.57 + 7.17 + 6.02 + 6.72 + 8.27 + 13.03 + 7.4 + 4) / 10=7.397

Giuliano_Altamura · December 31, 2021, 10:37am

Hello Luis, i’m trying to do what you are talking about in this post.
Could you arrive to a solution? Could you share it?
I need to understand the format the SQL sensor has to retrieve and of course the “data_generator” to use.
Thanks a lot!

RomRider · December 31, 2021, 11:00am

How is the value stored in the sensor sensor.hourly_house_energy? Is it W or kW? From what I see it seems stored in W. If so, you’ll have to use transform to convert it in kW and then it should display properly.

You can’t average the max over several days on the chart. You’ll have to create a sensor with Utility Meter - Home Assistant and then use that in the chart to draw the line.

Giuliano_Altamura · December 31, 2021, 1:40pm

Hello, may I ask your help?
I have a sql sensor providing an attribute called “json_result” containing:

[{"a":"1640390400","c":1.99},{"a":"1640476800","c":6.65},{"a":"1640563200","c":2.78},{"a":"1640649600","c":4.79},{"a":"1640736000","c":6.2},{"a":"1640822400","c":5.3},{"a":"1640908800","c":1.61}]

I am trying to display a graph with this code:

type: custom:apexcharts-card
graph_span: 7d
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
series:
  - entity: sensor.sql_pv_data_daily
    type: column
    data_generator: |
          return entity.attributes.json_result.map((entry) => {
            return [entry.a, entry.c];
          });

… but it displays nothing.
Any idea on how to correct it?
Thank you in advance and happy new year!

RomRider · January 1, 2022, 8:51am

Try this instead:

return entity.attributes.json_result.map((entry) => {
  return [new Date(Number(entry.a) * 1000), entry.c];
});

Giuliano_Altamura · January 1, 2022, 10:53am

Not working yet.

BTW, i tried with this:
series:

  - entity: sensor.sql_pv_data_daily
    type: column
    data_generator: |
      return [["2021.12.20", 6.65],["2021.12.21", 2.78], ["2021.12.22", 3.00]]

and it’s working; so I tried to create a sql sensor providing exactly the same format, which I did:

[["2021-12-26",6.65],["2021-12-27",2.78],["2021-12-28",4.79],["2021-12-29",6.2],["2021-12-30",5.3],["2021-12-31",5.68],["2022-01-01",1.62]]

but i can’t make the apexgraph working, nor with:

series:
  - entity: sensor.sql_pv_data_daily_3
    type: column

nor with

series:
  - entity: sensor.sql_pv_data_daily_3
    type: column
    data_generator: |
      return entity.states

nor with

series:
  - entity: sensor.sql_pv_data_daily_2
    type: column
    data_generator: |
      return entity.attributes.json_result

(please note that I made two sensors, xxx_2 where the query is providing the string in the attribute json_result, and xxxx_3 where the query is providing the string directly in the “state” of the sensor.

Nassau · January 2, 2022, 6:53am

For the network graph, would it be possible to apply the same conditional kB/MB formatting to the tooltip as the legend? I tried adding a y-axis formatter but it seems that the value = arr[arr.length - 1] code causes the tooltip to show the current value no matter where on the x-axis the point is. I couldn’t work out how to reference that point to replace the reference to the last item in the array