ApexCharts card - A highly customizable graph card

Shaad · July 7, 2021, 8:12pm

Arghhh, I’ve just spent hours trying to figure out how to display forecast data in an ApexCharts !!!

I got forecast data in different entities. No API unfortunately for my local forecast web service, so I have to scrape everything from the HTML page.
Le’ts say for example I have 3 entities : temperature_in_1h, temperature_in_2h, temperature_in_3h.
I can have according timestamps if I need it, no problem.

I’m trying to define a template including all my data as attributes to be able to use data_generator: with mapping function but I can’t find a way to achieve it

Whatever I try I can’t find a way to define a template to get an attribute like this for instance :

forecast:
  - datetime: '2021-01-28T11:00:00+00:00'
    temperature: 7.4
  - datetime: '2021-01-29T11:00:00+00:00'
    temperature: 7.4
  - datetime: '2021-01-30T11:00:00+00:00'
    temperature: 5.2

wifi75 · July 9, 2021, 12:01pm

can tou send code?

Kabala · July 10, 2021, 6:06pm

Hi everyone,
what am I doing wrong?
maybe it has something to do with the recorder or history?

type: custom:apexcharts-card
graph_span: 12month
span:
  end: month
header:
  show: true
  title: Monatsverbrauch
  show_states: true
  colorize_states: true
apex_config: null
now:
  show: false
  label: jetzt
  color: '#bf5e5e'
series:
  - entity: sensor.monthly_energy_vorrat
    type: column
    name: Verbrauch
    color: '#509665'
    group_by:
      func: last
      duration: 1month
    show:
      datalabels: true
  - entity: sensor.kosten_monatsverbrauch_vorrat
    type: column
    name: Kosten
    color: '#5c6c70'
    group_by:
      func: last
      duration: 1month
    show:
      datalabels: true

davo · July 11, 2021, 2:18am

@Cata - How long are you keeping the data - there is a default purge of data in home assistant, which I think is set to 7 days. It only retains data for 7 days. You can set it longer.

Where does the sensor get the data from for kWh usage and cost ?

Kabala · July 11, 2021, 6:10am

puge_keep_days set on 10 days
Can I exclude the entities from the recorder?

Utitilty meter 

utility_meter:
  daily_energy_vorrat:
    source: sensor.aktueller_verbrauch_vorratsraum
    cycle: daily
  weekly_energy_vorrat:
    source: sensor.aktueller_verbrauch_vorratsraum
    cycle: weekly
  monthly_energy_vorrat:
    source: sensor.aktueller_verbrauch_vorratsraum
    cycle: monthly
  yearly_energy_vorrat:
    source: sensor.aktueller_verbrauch_vorratsraum
    cycle: yearly
    
 
 intergration    

sensor:
  - platform: integration
    source: sensor.vorratsraum_plug_current_consumption
    name: aktueller Verbrauch Vorratsraum
    unit_prefix: k
    round: 2 
    
 Kosten


  - platform: template
    sensors:
      kosten_tagesverbrauch_vorrat:
        friendly_name: "Kosten Tagesverbrauch"
        unit_of_measurement: '€'
        icon_template: mdi:currency-eur
        value_template: "{{ (states('sensor.daily_energy_vorrat') | float * 0.2213) | round(2) }}"


  - platform: template
    sensors:
      kosten_wochenverbrauch_vorrat:
        friendly_name: "Kosten Wochenverbrauch"
        unit_of_measurement: '€'
        icon_template: mdi:currency-eur
        value_template: "{{ (states('sensor.weekly_energy_vorrat') | float * 0.2213) | round(2) }}"


  - platform: template
    sensors:
      kosten_monatsverbrauch_vorrat:
        friendly_name: "Kosten Monatsverbrauch"
        unit_of_measurement: '€'
        icon_template: mdi:currency-eur
        value_template: "{{ (states('sensor.monthly_energy_vorrat') | float * 0.2213) | round(2) }}"

  - platform: template
    sensors:
      kosten_jahresverbrauch_vorrat:
        friendly_name: "Kosten Jahresverbrauch"
        unit_of_measurement: '€'
        icon_template: mdi:currency-eur
        value_template: "{{ (states('sensor.yearly_energy_vorrat') | float * 0.2213) | round(2) }}"

nuki47 · July 12, 2021, 10:43am

How I have to change this code to get the maximum value of each hour of one day?

type: custom:apexcharts-card
header:
  show: true
  title: PV Tages-Produktion
  colorize_states: true
update_interval: 30 min
graph_span: 7d
span:
  end: day
series:
  - entity: sensor.solaredge_energy_today
    type: column
    opacity: 0.7
    stroke_width: 2
    show:
      extremas: true
    group_by:
      func: max
      duration: 1d

jazzyisj · July 13, 2021, 5:22pm

Try adding a curve: stepline parameter under the series options.

jazzyisj · July 13, 2021, 6:16pm

@ keex @ pollinolas

Your indenting is wrong here. It needs to be one level up. You also need to give the yaxis an id and apply that yaxis in the all_series_config parameter.

  tooltip:
    shared: true
  chart:
    height: 100px
yaxis:
  id: temp
  apex_config:
    tickAmount: 2 
all_series_config:
  yaxis_id: temp
  stroke_width: 2
  opacity: 0.8

I think you need to bucket your data points for them to show together on the tooltip.

group_by:
  func: max
  duration: 1h
  fill: last

jazzyisj · July 13, 2021, 6:28pm

@RomRider

I’ve noticed something about configuring the yaxis in templates. You cannot define a yaxis in a template then define additional yaxis in a chart config. The yaxis in the chart completely overrides the template yaxis declaration even if the id’s are different. Is this a bug or just a limitation of using yaxis in a template?

Use case: I have a series of graphs, each graph has a percent based series along with one or more additional series. I cannot define a percent yaxis in a template then add additional yaxis for the other series in each chart configuration. The percent yaxis in the template gets overridden and therefore does not exist. So I have to define the percent yaxis in each graph.

It would be handy if the yaxis could be templated in this manner.

Or have I missed something here and this is indeed possible?

RomRider · July 13, 2021, 9:48pm

I’ll need to check that, I don’t remember if I merge arrays or if I override them. If the latter, then the result would be what you are experiencing.

Mind opening an issue on GH so that I can track it please?

logistician · July 14, 2021, 11:20am

Perfect, thank you.

juaigl · July 16, 2021, 5:05pm

Thank you so much for this card.

Here one example for spain electricity price (PVPC)

imagen

card config:

type: custom:apexcharts-card
header:
  show: true
  title: Precio vs Consumo
  show_states: true
  colorize_states: true
apex_config:
  legend:
    show: false
  chart:
    height: 250px
all_series_config:
  type: area
  curve: stepline
  float_precision: 3
  stroke_width: 2
  opacity: 0.2
  extend_to_end: false
  show:
    extremas: true
now:
  show: true
yaxis:
  - id: first
    min: ~0
    max: '|+0.05|'
    show: false
  - id: second
    opposite: true
    min: 0
    max: 2.4
    show: false
graph_span: 1d
span:
  start: day
series:
  - entity: sensor.pvpc
    name: Precio
    yaxis_id: first
  - entity: sensor.energy_hourly
    name: Consumo
    yaxis_id: second
  - entity: sensor.pvpc
    name: Precio
    stroke_width: 1
    opacity: 0.05
    yaxis_id: first
    extend_to_end: true
    show:
      extremas: false
      in_header: false
    data_generator: |
      let res = [];
      let current_hour = new Date().getHours(); 
      for (const [key, value] of Object.entries(entity.attributes)) {
          if (key.endsWith("h"))
          {
              let hour = key.slice(6,-1);
              let date = new Date(moment({ "hour":hour, "minute":0 }));
              if (date.getHours() >= current_hour)
              {
                res.push([date.getTime(), value]);
              }
          }      
      }
      return res;

yousaf465 · July 18, 2021, 12:55pm

how do I set the time period? e.g in grafana you can easily choose the time period, I couldn’t find any mention of it in the apex-chart documnetion.

juaigl · July 18, 2021, 5:50pm

I’m having this issue:

imagen

It’s sunday (dom) and bar is not where it should be (or maybe is the lavel the one wrong). Another thing is why xaxis don’t take the whole available width.

Card config:

type: custom:apexcharts-card
header:
  show: true
  title: Consumo Energía Semanal
  show_states: true
  colorize_states: true
apex_config:
  chart:
    height: 200px
  yaxis:
    min: 0
    tickAmount: 4
  xaxis:
    type: datetime
    labels:
      datetimeFormatter:
        day: ddd
graph_span: 1week
span:
  start: week
series:
  - entity: sensor.energy_daily
    name: Hoy
    type: column
    float_precision: 2
    group_by:
      func: max
      duration: 1d
  - entity: sensor.energy_weekly
    name: Total semana
    float_precision: 2
    show:
      in_chart: false

Edit:
Also values not calculated correctly.
I’m displaying a utility meter in bar chart with group_by day and func max. Trying with last instead of max, but it gives worse results
imagen
imagen

Card config:

type: custom:apexcharts-card
header:
  show: true
  title: Consumo Energía Semanal
  show_states: true
  colorize_states: true
apex_config:
  chart:
    height: 200px
  xaxis:
    labels:
      format: ddd
      hideOverlappingLabels: false
graph_span: 1week
series:
  - entity: sensor.energy_daily
    name: Hoy
    type: column
    float_precision: 2
    group_by:
      func: max
      duration: 1d

XPatt · July 20, 2021, 10:12am

Hi! I love this graph card, there is only one thing that I am not able to do:

I have a column chart with only one series. I’ve defined a color_threshold and also, defined the colorized_states: true option.

Is there any chance to show the state with the same color than the current value of the serie defined in color_threshold?

For example: if the curren column is red, show the title in red.
Or at least being able to define a javascript function to calculate the color of the title?

Thanks!

macnug · July 20, 2021, 2:06pm

Hi Enrico,
im italian too.
I am struggling with apex chert, i would like to have a graph (not bargraph but curve) showing solar production, consumed and sold energy.
Do you have some suggestions or yaml to share?
Thanks!!!

fhopley · July 24, 2021, 11:46am

So… I’ve figured out enough about data_generator to solve my problem. Thanks again to @RomRider for the card. For those other newbies interested, I found two ways to set the state of a sensor to test / build from the basic data_generator examples (the weather.home & tides)

Use the Developer Tools > States tab to manually set the state & attributes of a sensor
Use the ‘Set State’ python script

It is a hack, but by using the python script in an automation that runs on startup, I’m able to load my rolled up monthly history of a few key variables into HA, so I can chart it along with the live 7 day data in my HA database. Here is a picture of some of the graphs produced.

Mariusthvdb · July 26, 2021, 12:43pm

looking for some guidance, creating my 2nd effort today to plot 2 y-axis’s without success so far…
first I trired mini-graph-card, but because I couldn’t get the secondary y-axis to be set correctly, here’s my first go at it using the apexcharts:

  - type: custom:apexcharts-card
    apex_config:
      yaxis:
        - id: sun
          show: true
          title: Sun
          min: 0
          max: 6000
        - id: cloud
          show: false
          title: Cloud
          min: 0
          max: 100
    span:
      start: day
    header:
      show: true
      title: Sun - Cloud
    series:
      - yaxis_id: sun
        entity: sensor.zp_actuele_opbrengst
        type: area
        fill_raw: last
        extend_to_end: false
        color: gold
        name: Sun
      - yaxis_id: cloud
        entity: sensor.weatherbit_cloud_coverage
        type: line
#        fill_raw: last
#        extend_to_end: false
        color: grey
        name: Cloud

won’t show me my clouds, or even the scale for that matter:

deselecting the Sun renders an empty graph (though the legend shows the clouds to be indentified correctly:

please have a look where I am troubling myself? thanks!

edit
duh, of course I have to set it to show: true… and opposite: true

still seems off … while I cant get rid of the decimals, using

    apex_config:
      decimalsInFloat: 0

on either y axis’s or generic

update
solved too:

    apex_config:
      yaxis:
        - id: sun
          show: true
#          title: Sun
          min: 0
          max: 6000
          decimalsInFloat: 0
        - id: cloud
          opposite: true
          show: true
#          title: Cloud
          min: 0
          max: 100
          decimalsInFloat: 0

noob…

Thomas.dmm · July 26, 2021, 1:07pm

It’s possible to have the forecast for the rain ? with weather.openweathermap ??

Thomas.dmm · July 26, 2021, 2:15pm

Can you show your code please thanks