ApexCharts card - A highly customizable graph card

[galaxy_explorer]

Here is my sun graph. It requires;
stack-in-card
button-card
card-mod
sun2

Improvements welcome

type: custom:stack-in-card
title: Sun
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    card_mod:
      style: |
        ha-card { border: none; box-shadow: none; }      
    cards:
      - type: custom:button-card
        name: Sunrise
        entity: sensor._sun_rising
        card_mod:
          style: |
            ha-card { border: none; box-shadow: none; }
        label: |
          [[[ return (entity.attributes.today).substring(11,16); ]]]
        show_state: false
        show_name: true
        show_label: true
        show_icon: false
      - type: custom:button-card
        name: Daylight
        entity: sensor._sun_daylight
        card_mod:
          style: |
            ha-card { border: none; box-shadow: none; }        
        label: |
          [[[ return Math.round(entity.attributes.today) + ' hrs';]]]
        show_state: false
        show_name: true
        show_label: true
        show_icon: false
      - type: custom:button-card
        name: Sunset
        entity: sensor._sun_setting
        card_mod:
          style: |
            ha-card { border: none; box-shadow: none; }
        label: |
          [[[ return (entity.attributes.today).substring(11,16); ]]]
        show_state: false
        show_name: true
        show_label: true
        show_icon: false
  - type: custom:stack-in-card
    mode: horizontal
    card_mod:
      style: |
        ha-card { border: none; box-shadow: none; }      
    cards:
      - type: custom:apexcharts-card
        card_mod:
          style: |
            ha-card { border: none; box-shadow: none; }
        experimental:
          color_threshold: true
        header:
          standard_format: true
          show: false
          show_states: false
        show:
          loading: false
        graph_span: 16h
        span:
          start: day
          offset: +5h
        series:
          - entity: sensor._sun_elevation
            type: area
            opacity: 0.8
            name: Elevation
            extend_to: now
            group_by:
              func: avg
              duration: 5min
            color_threshold:
              - value: 50
                color: white
              - value: 20
                color: yellow
              - value: 5
                color: orange
              - value: 0
                color: steelblue
        apex_config:
          chart:
            type: area
            height: 125
          legend:
            show: false
          grid:
            show: false
          stroke:
            width: 2
          xaxis:
            labels:
              format: HH
          yaxis:
            min: 0
            labels:
              show: false
            axisTicks:
              show: false
  - type: custom:stack-in-card
    mode: horizontal
    card_mod:
      style: |
        ha-card { border: none; box-shadow: none; }      
    cards:
      - type: custom:button-card
        name: Dawn
        entity: sensor._sun_dawn
        card_mod:
          style: |
            ha-card { border: none; box-shadow: none; }
        label: |
          [[[ return (entity.attributes.today).substring(11,16); ]]]
        show_state: false
        show_name: true
        show_label: true
        show_icon: false
      - type: custom:button-card
        name: Solar Noon
        entity: sensor._sun_solar_noon
        card_mod:
          style: |
            ha-card { border: none; box-shadow: none; }
        label: |
          [[[ return (entity.attributes.today).substring(11,16); ]]]
        show_state: false
        show_name: true
        show_label: true
        show_icon: false
      - type: custom:button-card
        name: Dusk
        entity: sensor._sun_dusk
        card_mod:
          style: |
            ha-card { border: none; box-shadow: none; }
        label: |
          [[[ return (entity.attributes.today).substring(11,16); ]]]
        show_state: false
        show_name: true
        show_label: true
        show_icon: false
columns: 1

[ZyberSE]

Awesome, thank you

Two questions.

1. Borders are not removed like in your image. From some searching there seams to have been some change that affected border code for people, does it work for you?
2. I guess your sensor._sun_daylight is a template sensor?

[galaxy_explorer]

I am using card-mod to remove the borders. I forgot to mention it, sorry.

The sun daylight sensor is provided by the Sun2 integration (not template). You may need to enable it through the integration options. Note, the sun sensors are prefixed with your chosen name.

[ttmetro (Bernhard Boser)]

How can I set the width of an ApexChart in the new “sections view” to full view width?

[vingerha]

You could try searching for ‘full width’

[ZyberSE]

Thank you!!

I’m almost there, yesterday it showed the sun but today I’m only getting this blue box.
Also yesterday the edged where a step line, not smooth as yours. Idea idea what could be causing this?

[tvds (Tim)]

Wow looks great! Willing to share the code? Certainly for the button/date scroll

[ZyberSE]

I’ll reply to myself. I found a workaround, the problem is with the gradient and when the sun elevation is negative. There will always be a thin line and where there is no max y set that thin line becomes rather big.

One workaround is to update the gradient config and add

- value: 0
  color: "#1C1C1C"

Now that won’t work in light mode or with other background colors, but I couldn’t figure out how to make it transparent so I just took the background color to see if it worked, which it did.
Maybe someone knows a better way to solv this?

I tried using transform on the series data and remove all negative values but that instead left the yellow stroke line at 0 all the time.

[galaxy_explorer]

OMG, only 4 hours of daylight! You must live in the artic circle. The short daylight period is most likely why it appears stepped.

Regarding the blue-light block, I’ve noticed that issue too. I think it’s a glitch in the apexcharts-card. It seems to correct itself once the sun rises. You could try removing the blue gradient to see whether it fixes the issue.

[ZyberSE]

To be exact it’s 3h 39min of daylight today

Try adding the extra gradient step I posted above, it more or less fixed it without messing with the blue fill in the positive area.

[feldsperling (dietmar)]

Hi Tim,

sure , you could check it up there .

Apexchart offset chart driven by buttons

Servus, I real love this - thx to all who contribute to make this possible . After about 1 month of HA and some weeks playing arround like a nerd, i think i have the first chart to share. Also because i have looked arround and have not found something similar and ready ( its never ) to start with. I have a sungrow inverter and they have some rather nice Mobile App. So i tried to copy a statistics part ( sort of ) . This is the result [hist] ( 21.12 was the best PV Day in December - and…

I made some changes already again - will update .

Hope it works for you .

Best regards, Dietmar

[galaxy_explorer]

Today’s snapshot from Sydney

[ZyberSE]

AI!!

Greetings from Sweden. At least I managed to ski today, although I must admit that after two runs it was too cold to stay outside. Especially above the tree line, where the wind was intense. It felt like -25°C with the wind chill.

[typxxi (wolf)]

How can I get ridd of the second and useless 6,3 consumption figure on the right label crossing the Y axis labelling ?

The sensor itself is showing 1 value for today: 6,3

Here is the code I am using

type: custom:apexcharts-card
experimental:
  color_threshold: false
  brush: false
graph_span: 10d
span:
  end: day
brush:
  selection_span: 6 h
  apex_config: null
all_series_config:
  show:
    name_in_header: true
    legend_value: false
header:
  show: true
  title: ""
  show_states: true
  colorize_states: true
apex_config:
  dataLabels:
    style:
      fontSize: 16px
      fontWeight: bold
      color: white
    offsetY: -4
    offsetX: 9
    textAnchor: middle
    background:
      enabled: true
      borderColor: black
      padding: 4
      borderWidth: 2
      borderRadius: 0
      opacity: 0
      foreColor: black
    dropShadow:
      enabled: false
      top: 4
      left: 4
      blur: 2
      color: red
      opacity: 1
  xaxis:
    labels:
      style:
        colors: black
        fontSize: 16px
        fontWeight: normal
    tooltip:
      enabled: false
  legend:
    show: true
    position: bottom
    horizontalAlign: center
    floating: false
    fontSize: 15px
  grid:
    show: true
    borderColor: black
    position: front
  chart:
    height: 224px
  tooltip:
    enabled: true
    followCursor: false
    shared: true
    x:
      show: true
      format: HH:mm - ddd. dd. MMM.
    fixed:
      enabled: true
      position: UpperRight
    style:
      colors: black
      fontSize: 16px
      fontWeight: normal
card_mod:
  style: |
    :host {
            margin: 8px 8px 8px 8px;
            font-size: 18px;
            colors: blue;
          } 
yaxis:
  - id: first
    min: 0
    max: 7
    decimals: 0
    apex_config:
      tickAmount: 7
      labels:
        style:
          colors: black
          fontSize: 15px
          fontWeight: normal
      title:
        text: ""
        style:
          colors: black
          fontSize: 16px
          fontWeight: normal
  - id: second
    opposite: true
    min: 0
    max: 14
    decimals: 0
    apex_config:
      tickAmount: 7
      labels:
        style:
          colors: black
          fontSize: 15px
          fontWeight: normal
      title:
        text: ""
        style:
          colors: black
          fontSize: 16px
          fontWeight: normal
series:
  - entity: sensor.olverbrauch_today
    name: " TAGESVERBRAUCH"
    unit: " L"
    type: area
    yaxis_id: first
    color: grey
    stroke_width: 4
    curve: stepline
    float_precision: 1
    group_by:
      func: max
      duration: 1d
    show:
      datalabels: true
      name_in_header: false
      in_header: false
      in_legend: true
      legend_value: false
      in_brush: false
      in_chart: true
  - entity: sensor.olverbrauch_today
    name: " TAGESVERBRAUCH"
    unit: " L TAGESVERBRAUCH"
    type: area
    yaxis_id: first
    color: grey
    stroke_width: 4
    curve: stepline
    float_precision: 1
    group_by:
      func: max
      duration: 24h
    show:
      datalabels: false
      name_in_header: false
      in_header: true
      in_legend: true
      legend_value: false
      in_brush: false
      in_chart: false
  - entity: sensor.gewachshaus_degc_filter
    name: " AUßENTEMP. GEWÄCHSHAUS"
    unit: " °C "
    yaxis_id: second
    color: blue
    stroke_width: 2
    curve: straight
    float_precision: 0
    show:
      name_in_header: false
      in_header: false
      in_legend: true
      legend_value: false
      in_brush: false
      in_chart: true
  - entity: sensor.gewachshaus_degc_filter
    unit: " °C GEWÄCHSHAUS"
    yaxis_id: second
    color: blue
    float_precision: 0
    show:
      name_in_header: false
      in_header: true
      in_legend: false
      legend_value: false
      in_brush: false
      in_chart: false

Any suggestion what is creating the additional 2nd label and value of 6,3 in that y-scale here covering the 14°C ?

I guess I will reply in at least 1 year … thanks

[Pilok (Benoit Rondeux)]

Hi,

Hello,

I’ve just discovered the fantastic ApexCharts Card mod and I wanted to try it with something tangible… so I tried to rebuild the default sensor card using a combo of:

• ApexCharts Card
• Grid card (to take advantage of the new grid system)
• Vertical-Stack-In-Card
• Card-Mod
• Mushroom Entity Card

What do you think?

PS: I could have avoid using both the card-mod, vertical-stack-in-card and Mushroom Entity Card if ApexCharts was including natively the ability to add a icon.

[vingerha]

I am not sure if the current version can handle this. Data is real-time so the grouping will include ‘today’ (forget the same value 6.3 for a moment). And span: end: day is including ‘now’ …
Maybe this is where the implementation needs to improve, i.e. it shows data before the end is really a days-end

[vingerha]

People are mostly interested in tricks like this … so do (!) post code with it (update yours)

[feldsperling (dietmar)]

Servus,

I hope someone could help here. I am trying to work on a monthly offset Graph from daily Sensor Data .

Currently for me it looks that i have to use group_by to get any reasonable results, the problem i have now is that i get different results compared to the HA Statistics Card, if i use APEX with statistics + group_by.

So the monthly offset works perfectly with the Statistics Card . ( -0 for current month and -1month …)

I am talking about the Batterie Entladen . (236,8 KW from monthly Stats vs. 230,6 from the daily stats + sum up group by month)

The Code from the Left about aggre and span/offset settings.

      span:
        start: month
        offset: ${'-' + states['counter.monthly_offset_value'].state +'d'}
      graph_span: 1month

        - entity: sensor.daily_battery_discharge
          name: Batterieverbrauch
          color: green
          type: column
          extend_to: now
          offset: ${'-' + states['counter.monthly_offset_value'].state +'month'}
          group_by:
            func: sum
            duration: 1month
            fill: zero
          statistics:
            type: state
            period: day
            align: start
          opacity: 0.6

2nd without group by

      span:
        start: month
        offset: ${'-' + states['counter.monthly_offset_value'].state +'d'}
      graph_span: 31d


       - entity: sensor.daily_battery_discharge
          name: Batterieverbrauch
          color: green
          type: column
          extend_to: end
          offset: ${'-' + states['counter.monthly_offset_value'].state +'month'}
          statistics:
            type: sum
            period: month
            align: end
          opacity: 0.6
 

This is the current month ( offset -0month )

statistics only on -0 offset somehow do make totals in Jan (240,5 - which is Dez + Jan )

I was hoping that the result would be the same if :

statistics = take sum of the month ( results ins 236,8 kw )
vs
statistics = take last/state of day and sum it and group it by month ( results in 230,6)

I think i have tried so many different things that i am lost atm. And changed to much also , because i do not understand ( i had some time where i thought i got it … lol - no ) .

Currently i first want to get the correct Values with the given offset , 2nd problem is the Date and Tooltips ( i might hide them anyway )

continue trying … but any possible hints would be great .

Br, Dietmar

[splunker]

Hello
Sorry to resurrect this old question. Did you figure out how to remove the left, bottom and right margins?

[Nibikk]

I have the following config for this chart. Everything is working well except on mobile I can’t zoom or pan. Is there a way to enable that? I’m using Android 13 and HA app 2024.12.7-full

- type: custom:apexcharts-card
    graph_span: 14d
    header:
      show: true
      title: Temperature History - 14 Day
    apex_config:
      stroke:
        width: 1
        curve: smooth
      chart:
        toolbar:
          show: true
          tools:
            zoom: true
            zoomin: true
            zoomout: true
            pan: true
            reset: true
        zoom:
          type: x
          enabled: true
          autoScaleYaxis: false
    series:
      - entity: sensor.temperature
        type: column
        name: Temperature
        group_by:
          func: max
          fill: 'null'
          duration: 1hr