ApexCharts card - A highly customizable graph card

Oh come on! Don’t do that to me :stuck_out_tongue_winking_eye:

Would be super useful if it was added especially since I can’t click the graphs header and get the classical histogram with the red line chart to see details like last sensor update.

Sir, do you see what I am doing wrong with my installation of your application?

You didn’t declare the resource in your lovelace section of the configuration: see here Dashboards and Views - Home Assistant

Thank you sir. That was my mistake – one I will never make again thanks to you

Hey @RomRider I have asked about this before and told it was nothing to worry about and nothing can be done about but this is an error that keeps on (1000 times)
image
Is there nothing that is causing this that can be fixed?

Nothing which can be done on my side unfortunately. It’s a library issue.

1 Like

When using an area chart and the period is 24 hours, is there a way to automatically create a vertical line at midnight to give a visual of a new day?

Yes, that is possible:

  apex_config:
    annotations:
      xaxis:
        - x: EVAL:new Date().setHours(0,0,0,0) # This will return last midnight

Note: it’s not compatible with the now config option.

Great work. Love this card.
One question though. Does anyone know if there is a way to change the line card line thickness? I couldn’t find a setting for this in the documentation.
Should i request a new feature?
Cheers

stroke_width is your friend, it’s in the documentation I believe :slight_smile:

1 Like

Thank you very much

7 Likes

Perhaps off topic, but I do love using your apexcard. But my lovelace.yaml is getting a bit unwieldy. Is there a way to callout/include another yaml card file from my lovelace.yaml? That would tidy things up for me.

P.S. - Where is your buy me a coffee link?

You can use multiple solutions:

  • !include which is standard in lovelace
  • lovelace_gen
  • decluttering-card which I also maintain
  • apexcharts-card templates (which are native to apexcharts-card)
1 Like

Awesome. Thanks for that.

Quick question: why does the card require enabling the recorder for an entity when only a pie or a donut is used? Ex:

type: 'custom:apexcharts-card'
chart_type: donut
series:
  - entity: sensor.energymonthlywatertank

The above won’t work if sensor.energymonthlywatertank is excluded from the recorder, even if only the last value of the sensor is needed for the chart.

image

The reason I’m asking is that I have over 15 “utility meter” that are updated every two seconds that basically count the kWh total of many different loads in my home. Enabling the recorder on those will chew up GB of data while I only need the last state; the integration total.

Let me know if I missed something.

Thanks !

Because you can also use group_by with those types of charts (which requires history). It could be an optimization for apexcharts-card, but it will require some rework to make it happen.

Better fill in a feature request on GH so that I don’t forget about it :slight_smile:

1 Like

Hi all,
why did happen this?
image
The red line must go to 100% instantly…

type: 'custom:apexcharts-card'
  graph_span: 1d
  cache: true
  header:
    title: Deumidificatore/Umidificatore
    show: true
    show_states: true
    colorize_states: true
  apex_config:
    yaxis:
      min: 0
      max: 100
    xaxis:
      labels:
        format: hh
        show: true
        showAlways: true
    legend:
      show: false
    dataLabels:
      enabled: false
      distributed: true
  series:
    - entity: sensor.umidita_int_humidity
      type: line
      name: Umidità Interna
      color: blue
    - entity: sensor.umidificatoretempl
      type: line
      name: Umid.
    - entity: sensor.deumidificatoretempl
      type: line
      name: Deum.

Not sure if you had solved this or not yet, but wanted to share since it was driving me crazy as well trying to extend the foreignobject element:

card_mod:
  style: |
    .apexcharts-canvas svg foreignObject {
      height: << height of card >> px;
    }

I actually wanted to have the chart angle start at 0 but couldn’t figure out how to get the legend text to right-align when floating, so your example provided a happy solution (flip it and use the default left-align). Thanks!

1 Like

You’ll want to use curve: stepline in the serie to have a “staircase” like chart. That’s because by default, it creates a smooth curve.