ApexCharts card - A highly customizable graph card

feldsperling · January 2, 2025, 11:37am

Servus,

Still trail and eror on my history daily graph’s testing . It really pains me how much time i need for so little - but i do not give up .

I want to show Monthly charts from .

this_month ( problem )
last_X_month ( got it working )

this_month:

I tried a lot of different stuff and the only way i got correct Data ( combi of span/statistics/group_by) was the below yaml code, but it renders “not very nice” . With this it show the correct data if i download it via csv. All my other tries ended in “shifted” day’s over the month or incorrect values .

      type: custom:apexcharts-card
      stacked: true
      span:
        start: day
      graph_span: 31days
      header:
        show: true
        show_states: true
        colorize_states: true
      apex_config:
        chart:
          height: 350
          zoom:
            type: x
            enabled: true
            autoScaleYaxis: true
          toolbar:
            show: true
            autoSelected: zoom
          xaxis.type: datetime show
        xaxis:
          labels:
            format: dd-MMM
      series:
        - entity: sensor.daily_direct_energy_consumption
          name: Batterieverbrauch
          color: green
          type: column
          group_by:
            func: sum
            duration: 24h
            fill: last
          statistics:
            type: state
            period: day
            align: end
          opacity: 0.6

This is the Data feeded

grafik

I am happy so far with the offset for last Month this works for me.

How i am able to get this one “nicer” ?

Thx, Dietmar

feldsperling · January 2, 2025, 11:59am

Hi,

i got it working with this:

card_mod:
  style: |
    ha-card { border: none; box-shadow: none; }      
cards:

hth, Dietmar

Kugelblitz · January 2, 2025, 3:30pm

took your gradient on the sun elevation.

feldsperling · January 3, 2025, 8:41am

… don’t use group_by it will get better result, and for this month i tried something ugly to insert an series mit offset to fill up the series and hide it - so i get a full month of data and the rendering is much better. Still hope to find a better way … if i get something nice out of it i will post. The Idea is to have some sort of "History Browser with Buttons for Monthly Summary to Daily Stats " - but lets see - still a lot of try and error .

galaxy_explorer · January 3, 2025, 9:47am

Try using the --card-background-color variable instead. I’ve updated my sun card and it works for me.

            color_threshold:
              - value: 50
                color: white
              - value: 20
                color: yellow
              - value: 5
                color: orange
              - value: 0.1
                color: steelblue
              - value: 0
                color: var(--card-background-color)

Note, minor change to gradient levels. Steelblue is now 0.1

WernerM · January 4, 2025, 1:23pm

Is i possible to use ApexCharts with an auto-entity and have individual charts for each entity like in a vertical stack?

Milliamper · January 5, 2025, 9:02am

Hello!
I hope that someone has already faced this problem here.
I have a chart which shows me how much natural gas did the boiler use. For the last 7 days, it works like a charm:

  - card:
      type: custom:apexcharts-card
      graph_span: 7d
      span:
        end: day
      header:
        show: true
        title: Ariston
        show_states: true
        colorize_states: true
      yaxis:
        - id: first
          decimals: 0
          apex_config:
            tickAmount: 5
          min: 0
          max: 10
        - id: second
          opposite: true
          decimals: 0
          apex_config:
            tickAmount: 5
          min: 0
      apex_config:
        chart:
          type: area
          height: 250
        stroke:
          show: true
          width: 1
          curve: smooth
        legend:
          show: false
        dataLabels:
          enabled: true
        fill:
          type: gradient
          gradient:
            shadeIntensity: 0.1
            opacityFrom: 0.25
            opacityTo: 1
            inverseColors: true
            stops:
              - 0
              - 50
              - 100
      series:
        - color: rgb(35,101,71)
          entity: sensor.napi_felhasznalt_foldgaz
          yaxis_id: first
          type: column
          name: Mai felhasznált földgáz
          group_by:
            func: last
            duration: 24h
          show:
            datalabels: true
            hidden_by_default: true
        - color: rgb(235,10,104)
          entity: sensor.napi_felhasznalt_foldgaz_ara
          yaxis_id: second
          type: column
          name: Mai felhasznált földgáz
          group_by:
            func: last
            duration: 24h
          show:
            datalabels: true
            hidden_by_default: true
    attributes:
      label: Heti Gáz

I would like to also log how much did i use in the previous month. For this I’m using an utility meter, which resets next on February 1. 00:00:00. My problem is that the chart didn’t logged properly the last reset and it memorized even some value after the reset. What could be the problem here?

  - card:
      type: custom:apexcharts-card
      graph_span: 12month
      span:
        end: month
      header:
        show: true
        title: Ariston
        show_states: true
        colorize_states: true
      yaxis:
        - id: first
          decimals: 0
          apex_config:
            tickAmount: 5
          min: 0
          max: 200
        - id: second
          opposite: true
          decimals: 0
          apex_config:
            tickAmount: 5
          min: 0
      apex_config:
        chart:
          type: area
          height: 250
        stroke:
          show: true
          width: 1
          curve: smooth
        legend:
          show: false
        dataLabels:
          enabled: true
        fill:
          type: gradient
          gradient:
            shadeIntensity: 0.1
            opacityFrom: 0.25
            opacityTo: 1
            inverseColors: true
            stops:
              - 0
              - 50
              - 100
      series:
        - color: rgb(35,101,71)
          entity: sensor.havi_felhasznalt_foldgaz
          yaxis_id: first
          type: column
          name: Havi felhasznált földgáz
          group_by:
            func: last
            duration: 1month
          show:
            datalabels: true
            hidden_by_default: true
        - color: rgb(235,10,104)
          entity: sensor.havi_felhasznalt_foldgaz_ara
          yaxis_id: second
          type: column
          name: Havi felhasznált földgáz
          group_by:
            func: last
            duration: 1month
          show:
            datalabels: true
            hidden_by_default: true
    attributes:
      label: Éves Gáz

Chykan · January 5, 2025, 9:15am

Try using statistics: under series:

statistics: # Grabs Long Term Statistics
  type: state
  period: day # Grabs 1 day at a time
  align: start
  show:

Milliamper · January 5, 2025, 1:39pm

Thank you very much!

Chykan · January 6, 2025, 1:31am

You are welcome

anzek.kosir · January 6, 2025, 9:01am

Hey, i do not know if this is my underestanding lacking, a bug, or a missing feature, but i have power data, that doesn’t update at a regular interval (it only updates on a sufficient change). A bit simplified, but a 2 kW load is on for 3 minutes out of every 15. (20% or so), but the sensor only updates with every change (so it updates to 2 kW at minute 0, ant then back to 0 at minute 3, to 2 kW at minute 15, 0 kW at 18 and so on.)

The actual average power over a 15 minut period shoud be 400W, but the graph shows the average as 1 kW. So just the average between measurements, not taking durations into account.

is there a way for me to fix that, apart from making some helpers that directly give me the correct average?

MrNorth45 · January 6, 2025, 10:01am

Hello there!

I am looking for a little bit of advice in configuring my radial card. I have two issues.

I need “ticks” or whatever it is called, the small lines you normally have on x and y axis at certain intervals. I need to grade my radial bar, but have no clue on how to configure this, since there is no “X or Y” axis here. Chatgpt and the documentation is clueless…
How do I get rid of the colored “dot” when the entity state is 0?

Here is a crappy image that might explain the issues

vingerha · January 6, 2025, 11:00am

Post some card & code?

vingerha · January 6, 2025, 11:37am

I donot think this exists, the ha-card is based on the js version and that one does not offer this
RadialBar / Circular Gauge Chart Guide & Documentation – ApexCharts.js

feldsperling · January 6, 2025, 2:33pm

Servus,

I am trying to show 1 Sensor with 3 different States in the chart ( off, stufe1, stufe2 ) . ( External Heating ) . So i want to see .

External Heating State + “zulauf” Temperature
Current Temp of the “Speicher”
( future Heatpump active / kw inserted - wait for the PAC2200 getting installed )

Currently i am doing something very urgly as i retrieve the same Series 3 times and use Transform to value the same and therefore because of 3 series color the different States .

Also if i define a min value for x: of 25 , and i have series data with 0 - i do not want to see the line plotted at 25 , but thats a minor of many others like having a square in the legend for those states.

What would be the non nyb way to get this done ?

thx, Dietmar

        type: custom:apexcharts-card
        card_mod:
          style: |
            ha-card { border: none; box-shadow: none; }
        header:
          show: false
          title: ""
          show_states: true
          colorize_states: true
        update_interval: 5m
        now:
          show: true
        span:
          end: hour
        graph_span: 12h
        show:
          loading: false
        apex_config:
          tooltip:
            enabled: true
            enabledOnSeries: undefinded
            shared: Boolean
          chart:
            height: 320px
          grid:
            show: true
            strokeDashArray: 0
            borderColor: "#444444"
            position: back
            xaxis:
              lines:
                show: true
            yaxis:
              lines:
                show: true
          yaxis:
            forceNiceScale: true
            min: 25
          xaxis:
            tooltip:
              enabled: false
            xaxis.type: datetime
            type: datetime
            axisTicks:
              show: true
            labels:
              format: HH:mm
            lines:
              show: true
        series:
          - entity: sensor.heizung_8
            color: green
            name: Speicher
            type: line
            invert: false
            stroke_width: 4
            group_by:
              func: avg
              duration: 10m
              fill: last
            show:
              in_header: false
              legend_value: true
              in_chart: true
              offset_in_name: false
            extend_to: now
          - entity: sensor.heizung_4
            color: orange
            name: Zulauf Fernwärme
            type: line
            invert: false
            opacity: 0.6
            show:
              in_header: false
              legend_value: true
              in_chart: true
              offset_in_name: false
            extend_to: now
          - entity: sensor.fernwaerme_state
            color: ffab88
            name: Stufe1
            type: area
            transform: "return x === 'stufe1' ? 30 : 0;"
            invert: false
            opacity: 0.4
            curve: stepline
            show:
              in_header: false
              legend_value: false
              in_chart: true
              offset_in_name: false
            extend_to: now
            stroke_width: 0
          - entity: sensor.fernwaerme_state
            color: ec5c51
            name: Stufe2
            type: area
            transform: "return x === 'stufe2' ? 30 : 0;"
            invert: false
            curve: stepline
            opacity: 0.4
            show:
              in_header: false
              legend_value: false
              in_chart: true
              offset_in_name: false
            extend_to: now
            stroke_width: 0
          - entity: sensor.fernwaerme_state
            color: 7cd4fd
            name: "Off"
            type: area
            curve: stepline
            transform: "return x === 'off' ? 30 : 0;"
            invert: false
            opacity: 0.4
            show:
              in_header: false
              legend_value: false
              in_chart: true
              offset_in_name: false
            extend_to: now
            stroke_width: 0
        all_series_config:
          stroke_width: 2
          type: area

vingerha · January 6, 2025, 3:23pm

From what I read, the fernwaerme_state return depends on state and a color
For the stat you can combine the transform but fafaik you cannot do a function for color so you have no option other than 3 entities

MrNorth45 · January 6, 2025, 10:20pm

Oh ok, thanks. Any idea about how to remove the “dot” when the radial bar is 0?

TheodorShep · January 7, 2025, 3:17am

Hi there.

How can I set my graph to show uniform times every half hour? So for example here it would show:

04:00am - 04:30am - 05:00am etc?

I’d also like the end to be the last half hour. So it should show the end as 5am until 05:30am where it would update the end to be 05:30am if that makes sense & is possible?

vingerha · January 7, 2025, 7:33am

Probably only via card_mod / style and a template to change the color to transparent

vingerha · January 7, 2025, 8:35am

In this span, seemingly a day, not possible…that would mean 48 ticks on such a small scale. Not sure what you expect to see in the end.
span has end: hour or minute, not 30min
Look at the docs?