ApexCharts card - A highly customizable graph card

[Con (Con van Doornik)]

Clearly, is it then possible to apply an “if then”, for example;

series:

• if states(“sensor.dag_afname”, > 0):
  entity: sensor.dag_afname
  name: Afname
  type: column
  unit: ’ W’
  color: darkviolet
  group_by:
  func: max
  duration: 1d
• else:
  entity: sensor.dag_lever
  type: column
  unit: ’ W’
  color: violet
  group_by:
  func: max
  duration: 1d
• endif:
• entity: sensor.dag_zon
  name: Zon
  type: column
  unit: ’ W’
  color: green
  group_by:
  func: max
  duration: 1d
• entity: sensor.dag_gebruik
  name: Gebruik
  type: column
  unit: ’ W’
  color: red
  group_by:
  func: max
  duration: 1d

[pmgsrosa (Pedro Rosa)]

Great addition for Home Assistant
I’m using it for several charts. Some of them have have positive and negative values.I have two questions regarding those charts:

1. Is there a way to draw a line at x=0 (even with a different line thickness), so that the zero line is always visible?
2. Is there a way to have dashed line on precise values, that is on 100, 200, etc… and not saying that i want 4 or 5 dashed lines? (because that depends on the maximum and mimum values).

Thanks.
Pedro.

[Lunkobelix]

Do you mean x=0 or y=0?

Play around with this code and see if it helps.

apex_config:
  annotations:
    position: back
    yaxis:
      - 'y': 200
        strokeDashArray: 5
        borderColor: '#f7a6af'
        borderWidth: 1

[pmgsrosa (Pedro Rosa)]

Thanks, that’s it! … and yes it’s y=0.

  annotations:
    position: front
    yaxis: back
      - 'y': 0
        strokeDashArray: 0
        borderColor: '#FFFFFF'
        borderWidth: 1.5

[bodaw]

Hello, I like the data labels in my chart, however I would like to display them only in case that the value > 0

  - entity: sensor.ote_sell_price
    yaxis_id: first
    type: column
    name: SELL Price
    unit: CZK
    color: Green
    show:
      datalabels: true
    group_by:
      duration: 1hour
      func: max

is there a way how to disable them based on value?

[Kertz1954]

This should do it. Add code to the end of your chart.

apex_config:
  dataLabels:
    enabled: true
    formatter: |
      EVAL:function(value) {
        if (value <= 0){
          value = ''
        }
        return value;
      }

[ThomasM (Thomas Mutzl)]

Just found this amazing graph card the other day. Thanks for all the effort bringing this to HA!

Is it somehow possible, to dynamically change the span.offset dynamically based on a condition?

graph_span: 2d
span:
  start: day
  offset: +1d 

The offset should be +1d or +0d depending of the current time.
Before 14:00 I want to show yesterday + today.
After 14:00 today + tomorrow.

Edit: at 14:00, new data for the next day is added. So I guess, I can easily solve that by changing it to

graph_span: 2d
span:
  end: day

[ThomasM (Thomas Mutzl)]

Can someone help me with annotations and labels. please?

apex_config:
  annotations:
    position: back
    yaxis:
      - 'y': 35
        strokeDashArray: 5
        borderColor: red
        label:
          text: EVN
    xaxis:
      - x: new Date('2023-01-27T06:00:00Z').getTime();
        borderColor: blue
        label:
          text: target

The horizontal line works.
But the vertical doesn’t. I guess, I didn’t get the expression right.

Also I would like to know, how I can bring entities into the annotation.
Instead the constant “35” it should be an entity value.
Same of course for the Date in the x-axis annotation.

[tango259]

Is it possible to show the current state of an entity when grouping series by day? My chart ends with yesterday, assumably since today hasn’t finished. I’d like to show today at the end and have it dynamically change as the value increases. Am I missing something or is this just not possbile?

type: custom:apexcharts-card
graph_span: 5d
span:
  end: minute
header:
  show: true
  title: Feeding Totals
series:
  - entity: sensor.total_daily_feeding_amount
    yaxis_id: amounts
    extend_to: now
    curve: smooth
    name: Daily Feeding Amount
    type: line
    group_by:
      duration: 1day
      func: max
  - entity: sensor.total_daily_feeding_amount
    attribute: daily_bottles
    yaxis_id: bottles
    extend_to: now
    type: column
    name: Daily Bottles
    unit: bottles
    group_by:
      func: max
      duration: 1day
yaxis:
  - id: amounts
    decimals: 0
    min: 340
    max: 500
    apex_config:
      tickAmount: 3
  - id: bottles
    opposite: true
    decimals: 0
    max: 10
    min: 6
    apex_config:
      tickAmount: 4

[Lunkobelix]

Trying to udnerstand this

This is how my code looks now:

yaxis:
  - min: 0
    max: ~3
    apex_config:
      forceNiceScale: true

Can I have the max: ~3 and still use your code?

[HA_n00b]

Tbh, no idea. You can try though. If that fixes the issue. I’m not an expert

[complex1 (Frank)]

For this, you need to install the (HACS) “config-template-card” card first and then something like:
Your question about xaxis I can not answer, because I do not use this, but I guess it’s almost the same as yaxis.

type: vertical-stack
cards:
  - type: custom:config-template-card
    entities: sensor.huidige_stroomprijs
    variables:
      average: states['sensor.huidige_stroomprijs'].attributes.average
    card:
      type: custom:apexcharts-card
      [...]
      apex_config:
        annotations:
          position: back
          yaxis:
            - 'y': ${average}
              strokeDashArray: 5
              borderColor: var(--primary-color)
              label:
                text: ${average}
                style:
                  background: var(--accent-color)
                  color: white

[Intro_Verti]

Goodday all,

I found a graph which I like, but no configuration available.
Who can help me creating this, or an example which shows the same?

I want to show 2 sensors in one bar, but they don’t need to be counted (if that is correct English).

This is what I’m looking for (but no config)

This is what I made, but this is not correct.

type: custom:apexcharts-card
apex_config:
  chart:
    stacked: true
graph_span: 31d
span:
  end: day
show:
  last_updated: true
header:
  show: true
  show_states: true
  colorize_states: true
  title: Prijsplafond Januari
series:
  - entity: sensor.monthly_net_consumption_streetadress_streetnumber
    name: Deze maand verbruikt
    type: column
    unit: kWh
    color: green
    group_by:
      func: max
      duration: 1d
  - entity: sensor.resterend_energieverbruik_mbt_prijsplafond
    name: Overage
    type: column
    unit: kWh
    color: red
    group_by:
      func: max
      duration: 1d

I really would like to have the same as the 1st snapshot.

Where to find an example please, I tried to scroll through 2K posts here, but I guess this is way faster

Thank you

[Kertz1954]

Edit your post and include your code.

[Intro_Verti]

I found this picture, and have no code.

That is why I ask for help, I am looking for code which creates this example

Thanks @Kertz1954

[ThomasM (Thomas Mutzl)]

Unbelievable, that I missed the Config-Template-Card.
Thank you so much!

The xaxis is still not working, though.

I reduced the yaml a bit, so only the relevant parts remain:

type: custom:config-template-card
variables:
  CAP: 28
  TARGET_TIME: new Date('2023-01-27T18:00:00Z').getTime()
entities:
  - null
card:
  type: custom:apexcharts-card
  graph_span: 1d
  span:
    end: day
  now:
    show: true
    label: Now
  show:
    last_updated: true
  series:
    - entity: sensor.awattar_at
      type: area
      opacity: 0.3
      curve: stepline
      extend_to: false
      color: rgb(3, 169, 244)
      data_generator: |
        {
          var data = entity.attributes.Data;
          var lastEntry = data[data.length - 1];
          // add extra slot (=point) so last slot has a line for duration in chart
          var extraEntry = { "Start": lastEntry.End, "End": lastEntry.End, "PriceCentPerKwh": lastEntry.PriceCentPerKwh };
          data.push(extraEntry);        
          return data.map((entry, index) => [new Date(entry.Start).getTime(), entry.PriceCentPerKwh * 1.2]);
        }
  yaxis:
    - id: price
      min: 0
      max: ~40
      decimals: 0
      apex_config:
        tickAmount: 4
  apex_config:
    annotations:
      position: back
      yaxis:
        - 'y': ${CAP}
          strokeDashArray: 5
          borderColor: rgb(224, 0, 27)
          label:
            text: ${TARGET_TIME}
      xaxis:
        - x: ${TARGET_TIME}
          borderColor: blue
          label:
            text: Target

The label in the horizontal annotation is for debug only and shows that the TARGET_TIME is calculated correctly.

[OzGav]

You said you created something so please post that.

[higgis (Henrik Davidsson)]

Trying to learn to program in the home assistant:-) have added an apex card with prices from the north pole have also made my own sensor where I can find out which 3 hours are the most expensive of the day.
I would like to be able to mark these three hours in the bar chart, but I cannot find or understand how to proceed.

[Kertz1954]

Can you edit your post and add an image, plus your coding. Thanks.

[Tyfoon]

Good question. I now do it by adding that info on top of the chart. In my case these are 2 hour slots avail in 12/24 hours and the secondary is within 6 hours.

Code

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.avg_energy_price
        secondary: >
          {{ states('sensor.lowest_price') | round(1) }}/{{
          states('sensor.highest_price') | round(1) }} 
        primary: |
          {{ states('sensor.avg_energy_price_CNT') | round(2) }} € 
        icon: mdi:power-plug
        icon_color: orange
        tap_action:
          action: more-info
      - type: custom:mushroom-template-card
        entity: sensor.hours_low_coming
        secondary: |
          {{ states('sensor.hours_low_coming_short') | round(0) }} urgent
        primary: >
          {{ states('sensor.hours_low_coming') | round(0) }}/{{
          states('sensor.hours_low_coming_far') | round(0) }} H
        icon: mdi:clock-check
        icon_color: orange
        tap_action:
          action: more-info
      - type: custom:mushroom-template-card
        entity: sensor.zonneplan_current_gas_tarriff_fixed
        secondary: |
          Gas
        primary: >
          {{ states('sensor.zonneplan_current_gas_tarriff_fixed') | round(2) }}
          € 
        icon: mdi:gas-burner
        icon_color: orange
        tap_action:
          action: more-info
  - type: custom:config-template-card
    variables:
      MOVINGAVERAGE: states['sensor.avg_energy_price_cnt']
    entities:
      - ${MOVINGAVERAGE.entity_id}
    card:
      type: custom:apexcharts-card
      apex_config:
        chart:
          height: 200px
          fontFamily: Raleway,sans-serif
        xaxis:
          labels:
            format: HH
        legend:
          show: false
        stroke:
          width: 2
        plotOptions:
          bar:
            columnWidth: 100%
        grid:
          show: true
          borderColor: '#00000030'
          strokeDashArray: 4
          position: back
        dataLabels:
          offsetY: -8
          background:
            opacity: 0.01
            enabled: true
            foreColor: '#CF7524'
            padding: 2
            borderRadius: 4
            borderWidth: 0
          style:
            fontSize: 9px
            color: rgb(200,200,200)
      experimental:
        color_threshold: true
      graph_span: 30h
      span:
        start: day
        offset: +4h
      update_interval: +1h
      header:
        title: Zonneplan Forecast
        show: false
      now:
        show: true
        label: NOW
      series:
        - entity: sensor.zonneplan_current_electricity_tariff
          color_threshold:
            - value: ${MOVINGAVERAGE.state * .75}
              color: '#228B22'
            - value: ${MOVINGAVERAGE.state * 1}
              color: '#d35400'
            - value: ${MOVINGAVERAGE.state * 1.25}
              color: '#c0392b'
          show:
            extremas: true
          type: column
          float_precision: 2
          data_generator: |
            return entity.attributes.forcast.map((entry) => {
              return [new Date(entry.datetime).getTime(), entry.price /100000] ;
            });
      yaxis:
        - id: '1'
          decimals: 1
          min: 10
          apex_config:
            tickAmount: 4