Apex Charts with a dynamic X Axis

Can you provide me the card code please (formatted)
I once did a flex offset but need to find where it is…

Thank you here is my code

type: custom:config-template-card
entities:
  - sensor.sunrise
  - sensor.sunset
  - sensor.sensor_mypv_energy
  - sensor.sensor_mypv_power
card:
  type: custom:apexcharts-card
  graph_span: 13.5hrs
  span:
    start: day
    offset: +6.5h
  header:
    show: true
    show_states: true
    title: ENERGY TODAY
  all_series_config:
    stroke_width: 2
    type: area
    float_precision: 0
  apex_config:
    annotations:
      xaxis:
        - x: ${new Date(states['sensor.sunrise'].state).getTime()}
          label:
            text: ☼
            borderWidth: 0
            style:
              background: yellow
              color: black
        - x: ${new Date(states['sensor.sunset'].state).getTime()}
          label:
            text: ☾
            borderWidth: 0
            style:
              background: blue
              color: white
    chart:
      type: area
      height: auto
      foreColor: '#7B7B7B'
      zoom:
        type: x
        enabled: true
        autoScaleYaxis: true
      toolbar:
        show: true
        autoSelected: zoom
        tools:
          zoom: true
          zoomin: false
          zoomout: false
          pan: false
          reset: true
    stroke:
      show: true
      width: 3
      curve: smooth
    dataLabels:
      enabled: true
    xaxis:
      tooltip:
        enabled: false
    legend:
      show: false
    grid:
      borderColor: '#7B7B7B'
    yaxis:
      - id: Power
        seriesName: Power
        show: true
        min: 0
        max: auto
        opposite: false
        reversed: false
        axisBorder:
          color: '#FF1654'
          show: true
        axisTicks:
          show: true
        title:
          text: Power
          style:
            color: '#4dac16'
        legend:
          show: false
      - id: Energy
        seriesName: Energy
        show: true
        min: 0
        max: auto
        opposite: true
        axisBorder:
          color: '#FF1654'
          show: true
        axisticks:
          show: true
        title:
          text: Energy
          style:
            color: '#d4d11c'
    tooltip:
      x:
        format: ddd dd MMM - HH:mm
  series:
    - color: rgb(30,176,19)
      entity: sensor.sensor_mypv_power
      name: Power
      yaxis_id: Power
      type: line
      unit: Wh
      group_by:
        func: max
        duration: 10 mins
      extend_to: now
    - color: rgb(180,244,75)
      entity: sensor.sensor_mypv_energy
      name: Energy
      yaxis_id: Energy
      type: area
      extend_to: now

Am not familiar with this, will try tomorrow with my ‘card-templater’

Found some time but since I donot have the sunris/sunset so I had to tweak things for the power sensor and the rise/set… as a result you cannot blindly copy this but the concept is working

graph_span_template: calculates the hours between sunrise and sunset
offset_template: calculates the hours from midnight

[/quote]

type: custom:card-templater
card:
  type: custom:apexcharts-card
  graph_span_template: |
    "{{ (( 0 - as_timestamp(state_attr('sun.sun', 'next_setting')) +
    as_timestamp(state_attr('sun.sun', 'next_rising')))/3600) | int(0)  }}h"
  span:
    start: day
    offset_template: >-
      +{{ ((as_timestamp(state_attr('sun.sun','next_rising')) -
      as_timestamp(now().replace(hour=23,minute=59))) / 3600) | round(1) }}h
  header:
    show: true
    title: testing
    show_states: true
    colorize_states: true
  series:
    - entity: sensor.linky_papp
      curve: smooth
      color: '#df6366'
      type: line
      opacity: 1
      stroke_width: 2
      offset: -24h
entities:
  - entity: sensor.linky_pap
    offset: -24h

Thanks, for taking the time to look at this.
It works nearly,
the Sunrise is correct but the sunset is at least an hour early

Many thanks for your help

Great, please mark my post as ‘resolution’ so others can benefit too (I hope)

Sorry just changed my post.
Bit of an issue with the sunset, which is a bit strange.
Just looking to see why

Its a bit strange, if I press the home button it shows a bit more of the graph and the bottom axis includes the time to sunset momentarily and then goes back to 18:00 (should be about 19:40 ish)

Nope I can’t get the sunset show and also the graph has stopped at 17:35, which is very odd as my duplicate, which is the before version has just finished at 19:40

I notice that your amendment also is constantly updating every second or so.
I already have the following sensors in HA maybe there is a different approach as there is no need to calculate the daylight hour range for example
entities:

  • entity: sensor.sensor_sunrise (datetime)
  • entity: sensor.sunrise (hrs ago)
  • entity: sensor.sensor_sunset (datetime)
  • entity: sensor.sunset (hrs ago)
  • entity: sensor.daylight (number of hh:mm:ss)
  • entity: binary_sensor.above_horizon (on/off)

Well, as I said, the concept it working so the rest is up to you :slight_smile:
The graph bases on live data, if one of the sensor updates, the graph should too, probably an option is to ‘average’ that out. There is a very large live post on apexcharts btw.

I redid all of this with the sensor.sunrise/set… for the annotations, I also can not get it to work with a template, rest seems fine to me

The sunrise is perfect.
The sunset ends at 17:00 hours exactly, hover it should be 19:50.
I will have a play around and see what I can come up with.
The 2nd issue, I realise the only way to solve that is to send 0Wh to the energy state on PVoutput at midnight, which is another project

Seems your graph span is not working then … did you use this below? And you can check in devtools > template if the provides the right value

graph_span_template: |
    "{{ (( as_timestamp(states('sensor.sunset')) -
    as_timestamp(states('sensor.sunrise')))/3600) | int(0)  }}h"

Yes I did use that formula exactly and I have checked this in the devtools and the reult is 12hrs
However the picture below shows the actual daylight sensor 13:03:54 plus sunset and sunrise, so it is 1hr wrong.
I am thinking it must be possible to use the data from sensor.sunrise for the offset and sensor.daylight for the span

Sun

I made a mistake, INT does not round, so if the diff is 12.9 it will show 12
Use this

"{{ (( as_timestamp(states('sensor.sunset')) -
    as_timestamp(states('sensor.sunrise')))/3600) | round(1)  }}h"

Yes that works thank you, I did see that, but I thought well you know much more than I do, so you must be right.
I notice that the card refreshes at something like once a second, which I suppose is because it is using the tmestamp.
I have been trying to get my head around YAML, but in my younger more foolish days I got well stuck into Vis Basic, BBC micro machine language and html and now I am very old, (72), I find it difficult to learn new tricks, although I try to have crack at it myself, before asking for help.
Thanks for being patient with me. How do I mark this as a resolution?

I looked at the data again and for today (at least), it almost exactly ends at 20:00
7.22+12.77


My graph shows fine

1 Like

‘solution’ is in one of the grey icons underneath a post (sometimes it is not there… then leave it)

That’s absolutely correct and exactly what I wanted to show.
I think I will add a couple more traces, such as the voltage and the power from the grid now

Thanks very much for your help, now on to the next project which is ???

There are many options, have a look at my graph in the huge-apex-post.
I want to trace consumption per day and set it out vs. production with forecast.
tbh, I have not yet found any practical use for the forecast other than making a nice looking graph :slight_smile:

ApexCharts card - A highly customizable graph card - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io)