ApexCharts card - A highly customizable graph card

@OzGav thanks for the help but I have been completely unsuccessful as I think software is calculating deeper here. The incoming values are used with “max” to determine %. “max” is required and it doesn’t seem like I can even use a EVAL: function to set “max”, it just always errors. What I would have wanted was to simply do like Math.max(w.globals.seriesTotals) to get the “max” value and set it like 10% higher. Otherwise I am relegated to setting “max” to like 250 which is greater than the maximum value of the points in all the 1008 data points, but then it isn’t as pretty as scaling it like 10% higher than the maximum for any one of them. The HA documentation states that “many” of the properties can be set using Javascript but doesn’t say which ones. I suspect “max” is one of those.

As for the “dataLabels”, no matter where I put it (apex_config or within the series itself), nothing worked. Either it errored or they did not change and remain as “%”.

That can be done with config-template-card. You’ll find usage examples in this thread, though maybe not exactly for the label.

Sounds like you may have hit a limit on the card’s functionality. You could try filing an issue report on GitHub and see if you can get some traction for an enhancement or wait for the ha-floorplan option and see if that works for you.

Yes, it can be achieved, but I suspect not with your existing yaxis configuration. Please post your full code so I can see what you have now.

Hi,
I’m really frustrated. Half of my Apexcharts are not working anymore correctly since newest HA 2013.2 update. The problem seems that HA recorder does not save the sensor values anymore, if not changing. I have a lot of sensors which are 0 over night and not changing until morning. This results in empty ApexCharts or wrong display for area graph, for stacked …and even for line graphs. Even fill_raw is not working. Do you experience the same???

Example:
This is a sensor which 0 during night and starts producing >0 values in the morning.
image
As you see, there are no 0 displayed …and “Loading…” is written on the graph until first value >0 arrives :frowning:
Here is the code:

type: custom:apexcharts-card
header:
  show: true
  title: Value - Today
  show_states: false
  colorize_states: false
all_series_config:
  stroke_width: 2
  extend_to: false
color_list:
  - red
graph_span: 5h
span:
  start: day
  offset: +0h
series:
  - entity: sensor.input_voltage
    fill_raw: last
    name: sensorvalue
    type: line
    group_by:
      func: avg
      duration: 1min
    show:
      extremas: true

If I’m changing to e.g. graph_span: 12h … you will see the mess.
image

So, How can I fix this problem? any help is really appreciated…

Thanks

HA 2013.2 update? Not helpful. There are 3 so far.

And what “mess” do you see if you add your sensor to the History Graph Card using 5h or 12h ?
if it’s the same as in your AP chart, then one of the actions below might help.

There is a ‘fill’ parameter within the ‘group_by’ option.

There is a ‘transform’ parameter within the ‘series’ option.

Hope this response helps.

Hallo Kertz1954,
thank you for your fast answer.

HA update?

Ok, I installed 2023.2.3 now but the same is for .2 and .1.
– mess ?
In second picture you see that first data shown in graph is ~7:00 there are no data shown before…whatever I do :frowning: in first picture you see that there are really no data because graph waits and “Loading …” is shown.
– fill in group_by
does not help. same result
– transform
does not help because no data

Again, before update 2023.2.x all was working without any problem. HA was recording correctly all values into the DB. Now the all values are missing when sensor value not changing…ApexCharts cannot deal with it :frowning:

Ok, I am going to shutdown my Beta system for 30 minutes. On restart I hope to see space(s) in my graph line. Catch u later !!

Here, look at this: I read the sensor values from HA DB via sql_web
In the response you see that the DB did not save any values between timestamp
1675872883.220729 (yesterday 17:14) and timestamp 1675923923.486574 (today 7:25) …only saving ones the 0 value and then nothing until 0 gets changed at 7:25…

So, HA did heavy changes in state recorder core … probably to save DB space.

They did, but not to save space, more towards saving SD Cards with less writes !

Here’s a screen shot showing the gap in data between 13:02 and 13:32, using the fill_raw option in series. It does work. Your first screen shot is correct. I have not tried with group_by as this is not relevent with this data.

I use LTS and that does not show any gaps. it assumes last state by default.

Only suggestion I have left is to force a dummy (-1 , -2 etc) value into the state if no change for a certain time/period and then use the transform option to turn it into null if less than 0. It might work !!

What you mean with LTS?

Your suggestion means to create template sensor to force dummy values?
I will also try own data generator to fill missing times with 0 before creating template sensor.

long term statistics !

Using the data generator is a good idea.

Ok, yes, I also have LTS charts but there I had different problem because daily reset is mostly some seconds after new day which results in wrong LTS in Apexchart. I also used own data generator to correct … see my reply some week ago.

…and for everyone who needs: I found the websocket command for history data. When calling in data_generator it also delivers only 1 value back for the start of timespan…which should normally return many values, e.g. for every 10s.

@websocket_api.websocket_command(
    {
        vol.Required("type"): "history/history_during_period",
        vol.Required("start_time"): str,
        vol.Optional("end_time"): str,
        vol.Optional("entity_ids"): [str],
        vol.Optional("include_start_time_state", default=True): bool,
        vol.Optional("significant_changes_only", default=True): bool,
        vol.Optional("minimal_response", default=False): bool,
        vol.Optional("no_attributes", default=False): bool,
    }
)

Hi Ganfoud,

Did you ever find a solution to this issue? Im looking for the exact same thing currently

I have created a graph for my home battery, but when I add a utility meter to the header, it is altering the y-axis scale, even though it is a header only item

My config is here. How do I make the y-axis behave?

Thanks


type: vertical-stack
cards:
  - type: custom:apexcharts-card
    view_layout:
      grid:area: middle
    apex_config:
      yaxis:
        forceNiceScale: true
      chart:
        height: 600px
      stroke:
        width: 1.5
        curve: smooth
    graph_span: 24h
    all_series_config:
      stroke_width: 1.5
      opacity: 0.4
      type: area
      curve: smooth
    now:
      show: true
      color: red
    span:
      start: day
    header:
      show: true
      title: Battery
      show_states: true
      colorize_states: true
    series:
      - entity: sensor.alphaess_battery_soc
        name: BAT
        transform: return x;
        yaxis_id: battery
        type: area
        color: '#A0C770'
        extend_to: now
        curve: smooth
        fill_raw: last
        opacity: 0.6
        group_by:
          func: avg
          duration: 5min
        show:
          legend_value: false
      - entity: sensor.home_load
        float_precision: 2
        name: Load
        transform: return x / 1000;
        yaxis_id: power
        type: area
        color: '#6FB6C6'
        unit: kW
        extend_to: now
        curve: smooth
        fill_raw: last
        opacity: 0.6
        group_by:
          func: avg
          duration: 5min
        show:
          legend_value: false
          in_header: false
      - entity: sensor.alphaess_solar_power
        float_precision: 2
        name: PV
        transform: return x / 1000;
        yaxis_id: power
        type: area
        color: '#FABF00'
        unit: kW
        extend_to: now
        curve: smooth
        fill_raw: last
        opacity: 0.5
        group_by:
          func: avg
          duration: 5min
        show:
          legend_value: false
          in_header: false
      - entity: sensor.alphaess_grid_power
        float_precision: 2
        name: Feed-In
        transform: return (x < 0) ? ((x * -1) / 1000):0;
        yaxis_id: power
        type: area
        color: '#DF681F'
        unit: kW
        extend_to: now
        curve: smooth
        fill_raw: last
        opacity: 0.3
        group_by:
          func: avg
          duration: 5min
        show:
          legend_value: false
          in_header: false
      - entity: sensor.alphaess_grid_power
        float_precision: 2
        name: Grid Consumption
        transform: return (x > 0) ? (x / 1000):0;
        yaxis_id: power
        type: area
        color: '#C18349'
        unit: kW
        extend_to: now
        curve: smooth
        fill_raw: last
        opacity: 0.3
        group_by:
          func: avg
          duration: 5min
        show:
          legend_value: false
          in_header: false
      - entity: sensor.alpha_utility_meter_daily_total_solar_energy
        name: PV
        transform: return x;
        yaxis_id: power
        unit: kW
        show:
          legend_value: false
          in_header: true
          in_chart: false
        float_precision: 1
      - entity: sensor.alpha_utility_meter_daily_grid_import
        name: Import
        transform: return x;
        yaxis_id: power
        unit: kW
        group_by:
          func: avg
          duration: 5min
        show:
          legend_value: false
          in_header: true
          in_chart: false
        float_precision: 1
      - entity: sensor.alpha_utility_meter_daily_grid_export
        name: Export
        transform: return x;
        yaxis_id: power
        unit: kW
        group_by:
          func: avg
          duration: 5min
        show:
          legend_value: false
          in_header: true
          in_chart: false
        float_precision: 1
    yaxis:
      - id: power
        min: 0
        decimals: 2
        apex_config:
          forceNiceScale: true
          title:
            text: POWER
          labels:
            formatter: |
              EVAL:function(value) {
                return value.toFixed(2).toString() + " kW";
              }
      - id: battery
        min: 0
        max: 100
        decimals: 0
        opposite: true
        apex_config:
          tickAmount: 5
          title:
            text: BAT
          labels:
            formatter: |
              EVAL:function(value) {
                return value.toFixed(0).toString() + " %";
              }

1 Like

Hi
No, but I didn’t really looked for a solution again since this post to be honest, maybe it is possible now?

Hi all, I have a datagenerator challenge
My sensor has this as attributes, I need to set out the datetime vs. the value.
Probably this is a " dûh " when I see the result but have been trying a while now and no progress at all

forecast:
  result:
    '2023-02-13 07:32:00': 0
    '2023-02-13 08:00:00': 464
    '2023-02-13 09:00:00': 900
    '2023-02-13 10:00:00': 1288
    '2023-02-13 11:00:00': 1503
    '2023-02-13 12:00:00': 1578
    '2023-02-13 13:00:00': 1508
    '2023-02-13 14:00:00': 1294

Hello, it is possible to make something like this?

Cause now it like this and its not show clear to me.

You are using Bft as a unit of measurement which only goes from 0 to 12, which is why your graph looks odd and difficult to read.
If you can, I would look for an other unit of measurement from your source., such as km/h.
Unfortunatly, there is no easy conversion from Bft to any other unit of measurement.
An example of (Bft): 2 = (km/h): 7-11, which does not give you any degree of accuracy.
Your other option would be to create new sensors and using a sequence of if’s use the mean of each Bft - km/h result. As per the example above that would be 9 km/h.