ApexCharts card - A highly customizable graph card

[Kjelljk (KJ HA)]

Hi, thanks for your tip.

But Im struggling to make it work.

type: custom:card-templater
card:
  type: custom:apexcharts-card
  graph_span: 2d
  span:
    start: day
    offset: -1d
  now:
    show: true
    label: Now
  apex_config:
    annotations:
      yaxis:
        - y_template: {{state("input_number.limit")}} 
          borderColor: '#cf6679'
          label:
            text: Limit
            borderColor: '#cf6679'
            style:
              color: '#fff'
              background: '#cf6679'
  series:
    - entity: sensor.kwh_meter_power_meter
      transform: return x / 1000
      extend_to: false
      name: Active Power
      float_precision: 3
      type: area
      stroke_width: 1
      opacity: 1
      color: '#3700b3'
      group_by:
        func: avg
        duration: 1h
entities:
  - entity: input_number.limit

What am I doing wrong?

[vingerha]

I see the issue, tried a few ideas for about 20 min…failed. So tried another card that allows template…that works

type: custom:config-template-card
entities:
  - sensor.linky_daily
card:
  type: custom:apexcharts-card
  graph_span: 30h
  header:
    show: true
    title: Conso ELEC temps réel
    show_states: true
    colorize_states: true
  apex_config:
    annotations:
      yaxis:
        - 'y': ${states['input_select.limit'].state}
          borderColor: '#cf6679'
          label:
            text: Limit

[cybermaus (Maurits)]

X-axis labels go wonky by less then 4 group by_points, plain wrong at 1 group_by point

(The below examples are simplified, my actual use case is to make a dynamic overview for a Campground, where alas single or few nights is very common.)

So when I group_by, in order to both get a “diff” result, but also to count noon-2-noon, at 4 nights, it all looks dandy:

At 3 and 2 nights, it looks rather wonky, but at least not wrong:

But at 1 night, the x-axis label is just plain wrong

So I wonder if this is something I should report as issue, or if there is anything I can do.
BTW: when I use span: end: day it does not work at all for 1 day, so calculating the start is already a bit of a workaround.

For clarity: that last 1-day image, the data is for June 26, as intended, but the x-axis is wrong, so it displays multiple numbers, and a different date ends up in the middle

type: custom:apexcharts-card
graph_span: 1d
span:
  start: day
  offset: '-1d'
header:
  title: Pitch 03 Energy
  show: true
all_series_config:
  type: column
  offset: -12h
  statistics:
    type: state
    period: hour
  group_by:
    func: diff
    duration: 1d
series:
  - entity: sensor.airco_pm_energy_total
    name: Daily Noon to Noon

[charlieBarker]

Is there some place better to get support/discussion on this component?
git discussions and issues seem to go unanswered and the git readme sends me here… also many questions and no response/answers.

I like this graph, implementation but config by trial and error is painful

[vingerha]

This huge post has a massive amount of answers but it is not easy to browse through due to its size…
You do understand that this is all on people’s spare time so you just have to be patient and in some cases, people may not be knowing the answer or not willing to spend time on it. There may be case where you get no answer at all, just need to accept that.

EDIT: tip1: donot ask open questions, explain hat you are trying to do and what does not work, examples…the more text the less likely the response

[dflvunoooooo]

Hi everyone. I try to get an invisible and floating yaxis, but fail. Somehow the space reserved for it does not disappear. Here is my chart:

type: custom:apexcharts-card
graph_span: 24h
update_interval: 5min
header:
  show: true
  title: Breitbandmessung
  show_states: true
  colorize_states: true
experimental:
  color_threshold: true
all_series_config:
  stroke_width: 3
  fill_raw: last
  show:
    header_color_threshold: true
apex_config:
  chart:
    height: 150
  legend:
    show: false
  grid:
    show: false
  xaxis:
    floating: true
    labels:
      show: false
    axisBorder:
      show: false
    axisTicks:
      show: false
    tooltip:
      enabled: false
  tooltip:
    shared: true
    marker:
      show: false
yaxis:
  - id: first
    apex_config:
      show: false
      showAlways: false
      floating: true
      tickAmount: 1
      labels:
        show: true
        offsetX: 35
      axisBorder:
        show: false
      axisTicks:
        show: false
      tooltip:
        enabled: false
series:
  - entity: sensor.breitbandmessung_download
    name: Download
    yaxis_id: first
    color_threshold:
      - value: 0
        color: red
      - value: 150
        color: orange
      - value: 230
        color: green
  - entity: sensor.breitbandmessung_upload
    name: Upload
    yaxis_id: first
    color_threshold:
      - value: 0
        color: red
      - value: 30
        color: orange
      - value: 45
        color: green

I tried the minimal layout, but even there is some space on the left.

type: custom:apexcharts-card
graph_span: 24h
update_interval: 5min
layout: minimal
header:
  show: true
  title: Breitbandmessung
  show_states: true
all_series_config:
  stroke_width: 3
  fill_raw: last
series:
  - entity: sensor.breitbandmessung_download
    name: Download
  - entity: sensor.breitbandmessung_upload
    name: Upload

Has anybody an idea?

[vingerha]

There was a post a while ago, but not sure if this is valid for all setup
ApexCharts card - A highly customizable graph card - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io)

[charlieBarker]

megathreads like this have lots of answers, but not easy to find anything for sure and much will have changed and possibly no longer valid. Of course I understand that this is nobody’s full time job, just wondered if there was a community somewhere else where there was more active discussion.

Looks like I’m missing a wider doc source with apex_config options. Seeing people refer to stuff that is not even mentioned on the git page offsetX: and xaxis: . Let’s see if that can provide some answers.

[vingerha]

agree that current doc is no covering all but you can look at apexcharts js and sometimes search hours.

[dflvunoooooo]

Perfekt, thanks. That did not work exactly, maybe apexchart changed since then, but it got me on the right track. One has to change the grid padding. This works for me:

…
  grid:
    show: false
    padding:
      top: -10
      right: 3
      bottom: -10
      left: -13
…

[pasvasconcelos]

I want to create a graph to show me the power consumption from my external AC unit, when all inside units are cooling or heating (without legend)…

with the HA graphs I need 3 to show this info (you can see in the above image), but I notice that it is possible with ApexCharts…

someone can support me?

[Kjelljk (KJ HA)]

Thank you, that worked

[blackice (Jose)]

Hello everybody!

I am using a addon (https://github.com/MiguelAngelLV/balance_neto) that calculates the net grid export with my photovoltaic panels. The value resets 5 seconds before o’clock (at XX:59:55) in order to make sure the value is reset within the hour (this reset is made so HA gets correctly the reset).

So, when showing the value, most of the times shows 0 because of this. Can I get it work using an offset of +5 seconds? I have tried to use it but didn’t make it to work.

On the picture, the blue columns is a self-made integrer but it is more accurante with the addon. The yellow one is the value from the addon. As you can see, the resets mainly falls within the present hour, so it shows 0. My intention is to show the very last value before XX:59:55. any ideas? thanks!

type: custom:apexcharts-card
graph_span: 24h
span:
  end: day
show:
  last_updated: true
header:
  show: true
  title: BNH
  show_states: true
  colorize_states: true
yaxis:
  - min: ~0
    max: ~1
    decimals: 1
series:
  - entity: sensor.balance_neto
    type: column
    name: X
    group_by:
      func: last
      duration: 1h
  - entity: sensor.balnce_w_vertido_red
    type: column
    name: X
    group_by:
      func: last
      duration: 1h

[Faecon (Jo)]

is it possible to have an different value in the header than the chart is showing ?

[denver]

Im not sure where to look for help on making the yaxis adjustable in the front end.

I have 8 ApexCharts displaying the temperature in each room. On each configuration I have:

yaxis:
    min: 15
    max: 22

This works fine but as the summer approaches I would like to change the setting to something like:

yaxis:
    min: 20
    max: 30

At the moment I have to manually go into all 8 chart yaml files and change the numbers and the same when winter comes. Is there a way to have these numbers set up as a input_number.min_number and input_number.max_number and relate to them in the yaml files so I can set these once in the front end? Hope this makes sense.

[CDRX2]

This can be done the way you describe with the help of config-template-card. There’s similar examples in this thread.

[Goro (4111)]

Great charts, I new into this, so I really appreciate some help here.
I get energy prices from an electricity company in Denmark through a restful call. I got the data in Home Assitant and as you can see, the data is coming as attributes in the format 00:00: 0.28 which means that price at 00:00 is 0.28.
I have the data for each hour and I’m getting them in two sensors one for today and the other for tomorrow.

I want to plot the data in a chart, I tried to use ApexCharts card as I can see other have been doing similar thing, but unfortunately I’m not able to crack the format for data-generator. Can someone please help in explaining what should be written in the data-generator to get the value plotted at the right time on the graph.

I tried the following but it did not work,

type: custom:apexcharts-card
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
series:
  - entity: sensor.jyske_energi_priser_today
    type: line
    data_generator: |
      return entity.attributes.map((entry) => {
        return [new Date(entry), entry.value];
      });

Thanks.

[Romanmir (Chris)]

I’ve been looking, and I haven’t found a way to do something like this. It’s… not quite a candlestick graph, but sorta.

Is there any way to format specific point based on what whether the last point is higher or lower than the previous point? Also, dig my mad MSPaint skills below.

[rcruikshank (Robert Cruikshank)]

Did you every solve this one? I’ve got the same issue with the same data from EMHASS.

[parautenbach (Pieter Rautenbach)]

I thought I’d share the day length chart I made.

      - type: custom:apexcharts-card
        series:
          - entity: sensor.daylight
            color: var(--custom-color-yellow)
            min: 0
            max: 24
        chart_type: radialBar
        apex_config:
          legend:
            show: false
          plotOptions:
            radialBar:
              startAngle: -170
              endAngle: 170
              dataLabels:
                value:
                  show: true
                  # the trick to insert a "newline" is to return the strings as an array
                  formatter: |
                    EVAL:function (percentage) {
                      const value =  percentage * 24 / 100;
                      const hour = Math.floor(value);
                      const minute = Math.round((value - hour) * 60);
                      return [`${hour}h${minute.toString().padStart(2, '0')}m`, `(${percentage.toFixed(0)}%)`];
                    }