ApexCharts card - A highly customizable graph card

Hi,

i am a beginner with coding and home assistant and i have a question about an apexcharts data generator.
i would like a line chart where the following is calculated.

sensor.electricity_meter_energy_consumption - sensor.electricity_meter_energy_production

can someone help me with this? i have this.

[type: custom:apexcharts-card
apex_config:
  chart:
    stacked: true
graph_span: 28day
span:
  end: day
show:
  last_updated: true
header:
  show: true
  show_states: true
  colorize_states: true
  title: Energieverbruik per dag
series:
  - entity: sensor.electricity_meter_energieverbruik
    name: energieverbruik
    type: line
    unit: ' kWh'
    color: darkviolet
    group_by:
      func: avg
      duration: 1d
  - entity: sensor.electricity_meter_energieproductie
    name: teruglevering
    type: column
    unit: ' kWh'
    color: slateblue
    invert: true
    group_by:
      func: max
      duration: 1d
  - entity: sensor.netto_verbruik
    name: Netto verbruik
    data_generator: |
      [[sensor.electricity_meter_energieverbruik - sensor.electricity_meter_energieproductie]]
    type: line
    show: in_header: true

Easiest is via a template sensor. The only other thing I know of is using statistics via the websocket api. Sadly this is not well documented as I would expect there would also be a solution for the states.
With below you can add a similar set for entity2 and subtract that in ‘let stat =…’
The benefit of using statistics is that they are all on the same time so you donot have to (possibly) align the datetime-stamps of both sensors…the downside is that statistics are on a much lower frequency

          data_generator: |
            const stat_entity1 = 'sensor.yoursensor1';
            var statistics1 = await hass.callWS({type: 'recorder/statistics_during_period',   
            start_time: new Date(start).toISOString(), end_time: new Date(end).toISOString(),
            statistic_ids: [stat_entity1], period: 'hour'});
            var stats1 = statistics1[stat_entity1];
            var result = [];
            var len = stats1.length;
            for (let i = 0; i < len; i++) {let stat = stats1[i].state;
            result.push([(new Date(stats1[i].start).getTime()),stat]);}
            return result;

How does the statistics and group_by work together?
My LTS statistics is a monotonically growing sensor that increases each time an event occurs. I would like to track number of events per month for past 12 months.

type: custom:apexcharts-card
graph_span: 12month
span:
  start: month
  offset: "-11month"
header:
  show: true
  title: Monthly use of washing machine
  show_states: true
  colorize_states: true
series:
  - entity: sensor.washing_machine_cycles_total
    type: column
    statistics:
      type: state
      period: month

Produces the correct values, grouped by month, but not number of times per month.

If I add the group_by part:

    statistics:
      type: state
      period: month
    group_by:
      duration: 1month
      func: diff

The chart disappears and I don’t see any issue in the JS console log.

What am I doing wrong?

it happens when

extend_to: now

is used

I recommend using

extend_to: false

until its fixed

I’m getting odd behaviour when using color threshold.

I accept that this is experimental (and I’m happy raise it as a bug if necessary) but I’ve got a fairly simple graph setup:

type: custom:apexcharts-card
graph_span: 14d
experimental:
  color_threshold: true
header:
  show: true
  standard_format: true
  show_states: true
  colorize_states: true
series:
  - entity: sensor.front_bedroom_thermometer_pressure
    show:
      extremas: true
      header_color_threshold: true
    name: Air Pressure
    color_threshold:
      - value: 995
        color: blue
        opacity: 1
      - value: 1000
        color: cyan
        opacity: 1
      - value: 1005
        color: green
        opacity: 1
      - value: 1010
        color: yellow
        opacity: 1
      - value: 1015
        color: orange
        opacity: 1
      - value: 1020
        color: red
        opacity: 1

However on any dashboard I get a graph that looks like this:

Is it my settings or something else as I’d expect the colors to align with the Y axis?

TIA

Possibly gaps in the data, try to add fill_raw: last to the series

Thanks!

That did the trick!

Annotations, point yaxis to entity value:

I have a apexchart card and inside apex_config I have two annotations to draw a limit tolerance, but I want to point second limit (24.8) not a fixed value, I need to be equal to a entity value:

apex_config:
  annotations:
    position: back
    yaxis:
      - "y": 26.2
        strokeDashArray: 1
        borderColor: "#f80808"
        borderWidth: 3
      - "y": 24.8
        strokeDashArray: 1
        borderColor: "#f80808"
        borderWidth: 3

with a template solution is not working well, for example the following code do not work:

apex_config:
  annotations:
    position: back
    yaxis:
      - "y": 26.2
        strokeDashArray: 1
        borderColor: "#f80808"
        borderWidth: 3
      - "y": {{ states('input_number.lim_confort_suite') | float }}
        strokeDashArray: 1
        borderColor: "#f80808"
        borderWidth: 3

There is any solution?

Thanks

Embed the card in card-templater, this question pops up many (!) times up in this thread…