ApexCharts card - A highly customizable graph card

clear your cache on your mobile phone :slight_smile:

I really suggest you use HACS, it avoids a lot of this caching non-sense…

It’s not that.
I’m using the companion app not browser. in chrome on my mobile it is fine, but if i use the HA app then it throws the error. if i remove the apex config for stroke then it works again in the HA app

I cleaned cache on the mobile chrome app , but to no effect … it was ok in the browser app anyway.

Thanks; working perfectly. I was looking for it in the ha-card style and overlooked the apex config. Will follow your progress on the threshold color. Thanks again

I’m sure it is :blush:

The chrome cache is not the same as the companion app. You have to clear the cache of the companion app and probably also the cache of the webview app.

Any default values you think I should set for all the fontFamily config?

You can actually hit the entire card by setting it under chart. I use the font below globally so its a quick match for everything else on my dashboards. I don’t know why people would need multiple fonts in same chart. Probably could just add it to the change height example at the bottom of the github page and call it a day. Not sure it would be worth the time to change the card configuration itself.

apex_config: 
  chart: 
    fontFamily: "Julius Sans One"

First of all: I love this card! Is exactly what I was looking for. I do however found a strange quirk in displaying the pie chart (and donut chart too).

When I use the following:

type: 'custom:apexcharts-card'
chart_type: line
series:
  - entity: sensor.sds11_pm_10_ug_m3_2
  - entity: sensor.sds11_pm_2_5_ug_m3_2

I get the below (as expected):
line

But if I turn this into a pie chart like below:

type: 'custom:apexcharts-card'
chart_type: pie
series:
  - entity: sensor.daily_energy_boiler_total
    name: Boiler
  - entity: sensor.daily_energy_house_total
    name: Whole house

The result is the following:
pie

Am I doing something wrong?

EDIT: nevermind… Updateing Apexcharts solved the issue :smiley:

Update to 1.5.0 there’s a fix for that in there. Verify the console of your browser to be sure you are really running 1.5.0 and not a cached version.

Struggeling with the now and fill_raw settings a bit.

When I put the now code before of apex_config I get an error message (value.now is extraneous) and when I put it inside nothing is happening.

type: 'custom:apexcharts-card'
header:
  title: Elpriset idag & imorgon
  show: true
graph_span: 2d
span:
  start: day
apex_config:
  now:
    show: true
    color: '#ff0000'
  label: Now

Furthermore, I don’t really get how to use the fill_raw setting, couldn’t find any example code.

Anyone that has tried these and can point me in the right direction?

Thanks!

Clear your browser cache, now is going into the main part of the config. If it errors out, it’s because you’re still running an old version from the cache of your browser.

What do you want to achieve?
Eg: this would fill any empty values with the previous non empty value from your sensor.

series:
  - entity: sensor.sensor_with_null
    fill_raw: last

Tried in another browser and it worked just fine there. Clearing cache solved it. Thanks!

This is great. I’m gonna get on board. Makes me wonder why there wasn’t ever a “Grafana card”? Grafana charts are pretty cool too but too hard to integrate into frontend!..

Because that’s not how it works haha :slight_smile:
However, you can use a camera entity with a path to a chart in grafana to display a png of your grafana chart. It’s compute intensive and not very good looking though :slight_smile: or maybe iframes.
You can get some examples from this thread: Best way to get Grafana chart into Lovelace card

There is no emoticon with large enough :man_facepalming: Really feel ashamed, after so much time spend with HA :slight_smile: Thanks a lot! working like a charm!

After updating the card works marvellously (see below). A small feature request from my end would be to add a “total” variable to it. Rationale behind it is that I measure various appliances at home and also the total power consumption. If I could add the “total value consumed” to the piechart it would allow me to also include the “unmeasured” part. I currently do that by leveraging a seperate sensor which basically does “unmeasured = total measured - appliance1 - appliance 2 - …”, but including it in the card would be much easier.

4 Likes

I think that would solve your issue but it works only with chart_type: donut:

apex_config:
  plotOptions:
    pie:
      donut:
        total:
          show: true
          showAlways: true

Please kindly assist, I may have the yaml wrong so your code is not recognising it?
I am trying to use an infill path for one of the series, the first. All looks good except the grey fill for “boiler_on_time” is not filled. Everything else is as expected
?

type: 'custom:apexcharts-card'
header:
  show: false
series:
  - entity: sensor.boiler_on_time
    name: On time
    color: rgb(100,100,100) 
  - entity: sensor.ble_temperature_lounge
    name: Lounge
  - entity: sensor.ble_temperature_dad
    name: Dad
  - entity: sensor.ble_temperature_summer
    name: Summer
  - entity: sensor.ble_temperature_guest
    name: Guest
  - entity: sensor.ble_temperature_kitchen
    name: Kitchen
graph_span: 12h
update_interval: 5m
cache: true
apex_config:
  fill:
    type: solid
    opacity: 
      - 0.5
      - 0
      - 0
      - 0
      - 0
      - 0
  chart:
    zoom:
      type: x
      enabled: true
      autoScaleYaxis: false
    toolbar:
      show: true
      autoSelected: zoom
  stroke:
    width:
      - 1
      - 3
      - 3
      - 3
      - 3
      - 3
    curve: smooth
  yaxis:
    - title:
        text: On-time
      opposite: true
      min: 0
      max: 5
      tickAmount: 1
    - title:
        text: Temperature
      min: 15
      max: 25
      tickAmount: 10
    - show: false
      min: 15
      max: 25
    - show: false
      min: 15
      max: 25
    - show: false
      min: 15
      max: 25
    - show: false
      min: 15
      max: 25

image

That’s a bit broken at the moment. You can’t redefine opacity because of this bug. Also fill opacity for a line will apply the opacity to the line itself (not very logical but that’s how it is done in ApexCharts). If you want to fill the area between 0 and the line, you’ll have to use type: area in the serie.

Hi,
Could someone tell me how i would combine this into one stream of data please. I’m trying to chart how likely it to rain in the next week, having a time scale along the bottom, and turn each of these into data points, rather than individual lines.

Thank you.

That is not yet possible, but I plan to add this feature soon (compare sensors together without using a timeline)

1 Like