ApexCharts card - A highly customizable graph card

The sensor you create should show just the hour as now 13

Thanks, so 13.00 - now, and after 14.00 it will reset itself. And should it be the kWh or kW sensor? So the current usage or sum of usage of the hour?

Please do not add further questions to the one you initially raised which was how to display to current hour. Help your self and change your code to

graph_span: nh
  span:
    end: minute

and then sort out your other questions.

I’m trying, but graph_span: nh does not seem to be valid.

EDIT: I understand that n is a variable that I should change now ;). Thanks. This works!

1 Like

I have made this chart, but i think the columns is aligned to far to the left. Any ideas how i can align them to te center?

Share your code, instead of ( or with ) the pic, then people can try to “elaborate” from there , to figure it out
I.E in my latest “tests” i didn’t find the columns aligned to the left (out of the box) , thou depending upon the amount of columns, and the text (labels) below, you can end up with something that doesn’t look aligned

EDIT: it seems like it’s your stroke_width on the column that makes it look like that :wink:

Here is the code. When i change the stroke_width it isn’t directly to the left, but really far left

      type: custom:apexcharts-card
      header:
        title: ' '
        show: true
        show_states: true
        colorize_states: true
      graph_span: 10d
      span:
        start: day
        offset: '-9d'
      apex_config:
        legend:
          show: false
        dataLabels:
          enabled: false
      series:
        - entity: sensor.elpris_idag
          type: column
          color: '#03a9f4'
          group_by:
            func: max
            duration: 1day
          name: Idag
          extend_to: false
          stroke_width: 12
        - entity: sensor.snittpris_denna_manad
          type: line
          name: Snittpris
          stroke_width: 5
          fill_raw: last
          curve: smooth
          color: lightblue

I had my first go at setting up an ApexChart today. But it completely bogged down my Home Assistant and I only just managed to delete it and get control back.

It was scary how it made my HA almost unusable.

This is the chart I had created (still learning about how to best set up):

type: custom:apexcharts-card
header:
  show: true
  title: Hot Water Power Diversion
  show_states: true
  colorize_states: true
graph_span: 2d
span:
  start: day
  offset: '-1d'
series:
  - entity: sensor.power_photovoltaics_fronius_power_flow_0_http_192_168_0_201
    transform: "return x / 3;"
    type: column
    opacity: 0.8
    color: rgb(250, 250, 0)
  - entity: sensor.power_hot_water_split_aircon
    type: column
    color: rgb(250,100,0)
    opacity: 1
yaxis:
  - min: 0
    max: 3000

Any clues on what I’m doing wrong or how to make it not completely bog HA down?

Thanks!

Not sure but maybe try reducing the span to 6 hours vice two days?

Don’t use stroke_width on column, if you read further up on the linked topic, i shared my code, where you’ll find where and howto use % as width for columns ( edit: “Bars” ) … so they get “centered”

With a column ? Read the documentation.

Thanks. If these charts can’t plot just two days of data without taking over my HA then they are no good to me. Thought they might have been a better alternative to Grafana on a dashboard.

??? , i have never answered you in any regards, so i really have no idea of why you reply to me ?

EDIT: Beside, if i would have answered you in your request for help/assistance, i would have told you to … 1. show what’s wrong :wink: 2. explain “bog down” . 3 INVESTIGATE, bog down , because you most likely have some underlying issues, with 1 of, or both your “suspec_named_sensors”, which might give you a hint, to solve your “bog down” experience

For some reason this doesn’t work for me. Any idea why?

data_generator: |
  return entity.attributes.raw_today.map((entry) => {
    const nu = new Date()
    const series_entry = new Date(entry.start)
    if(nu.getHours() == series_entry.getHours())
      {return [series_entry, entry.value + hass.states['sensor.elpris_paslag'].state]}
    return [series_entry, 0];
    });
- sensor:
  - name: "elpris_paslag"
    state: >
      {% set paslag =  0.82225|float %}
      {{ paslag }}

I don’t get an error but the hass.states['sensor.my_sensor'].state simply seem to return 0.

I didn’t, I responded to OzGav. Don’t know why it appears as responding to you.

But thanks anyway!

I can’t because the chart makes the HA system and browser slows down so much I can’t do anything with it. It takes minutes for one mouse click to respond.

The entire HA interface slows down to a near stop as a result of just adding this one chart, system resources are overwhelmed to the point that Home Assistant dashboard crashes. I had to be very careful and patient, eventually was able to delete the manual card with this chart. Once it was deleted my HA is back to its normal zippy self.

Not sure what to look for or to know what is wrong. The sensors display their data just fine in regular HA dashboards. I can view their history tab quickly and easily, and if i choose a regular inbuilt card they show data just fine, e.g. these are the two sensors I was using, they show here in a jiffy and no system issues:

Yeah I’m not sure if that is the issue just suggested to try it and see if that helps. If it does then you can continue down on the track to work out why

Does hass.states['sensor.elpris_paslag'].state] return text and needs converting to a number?

Maybe, the template sensor code is in my post above and there I (think I) convert it to a float.

Edit:
Working now, me being stupid as always :slight_smile:

Thanks. I think I need to set up a test environment for this, or take a snapshot of my HA VM before trying again. I’m not going to risk putting any Apex Chart in my regular dashboard again. It’s that bad.

Try with first remove 1 of the sensors from this apex-card

ie.

  1. remove solarnet-power-photo
  2. remove

as this seems in conflict with the 8000W that seems to be registered in your native history card

if you still have problems after removing these 2, i would look into / monitoring your system and network resources, as im not familiar with what system you have your HA on, nor which device you trying to view your Graphs from, i can’t say much, but your “bog down” seems related to power/resource whether it’s cpu/ram or network , should be fairly easy to figure out

Lets say your solar_power_prod_sensor , spewing 8000W ( to your limited to 3000 graph ) AND at the same time does this in a constant flow with 1 seconds interval … i mean the graph your showing aint showing a nice thin line, the blue line is very irregular , same goes for the pink for that matter, so there is heavy activity, i don’t know where this info gets trans-coded, or whether it’s raw … and i don’t see any “group_by” in your card … so i think you basically trowing in a homogeneous amount of information, which the card obviously have hard to deal with

Not to mention: … i assume you are aware that the “graphs” you are trying to “create” is COLUMNS , not lines, now that would look interesting in a detailed scale, considering the amount of “points” ( which are not group-ed) , how often does this(these) sensors “update” … spewing out tons of info in “buckets” or ? , small, large buckets ? , does each “bucket” crave a column ?..

PS: sorry for my way of writing, but before you criticize and spew your negative opinions, be sure you know what you are doing