ApexCharts card - A highly customizable graph card

I have 2 questions;
How do I configure the vertical gridlines.
And is it possible to get 2 entities in the same place (column).

See my post above with windmolens as a background. It has a brief grid section and also covers stacked columns. More info for all options can be found here

I could make horizontal bar (column), but I still can’t figure out the rests, like swapping Y and X entities.
Hopefully someone else knows.

apex_config:
  plotOptions:
    bar:
      horizontal: true
      columnWidth: 80%
  dataLabels:
    enabled: true
    textAnchor: middle
    dropShadow:
      enabled: true
    offsetY: -12
    style:
      fontSize: 12px```

Hello,
starting to use ApexCharts. Spend a lot time in the thread and with searching.
Can someone help we.
Can I increase the textsize of the current states:

image

Thank you :slight_smile:

How to use if then else in a formatter function? The below code works, but some of the data value might be not available / undefined, so the tooltip will display NaN.

I want to catch that NaN, and convert it to 0.

Anyone can help?

apex_config:
  tooltip:
    enabled: true
    'x':
      format: MMM dd
    'y':
      formatter: |
        EVAL:function(value) {
        let text = parseFloat(value).toFixed(3);
        let result = text.replace(".", ",")+" m3";
        return result;
        }

SOLVED the issue by adding fill: zero in the group_by:

series:
  - entity: sensor.helper_gas_consumption
    type: column
    float_precision: 3
    fill_raw: zero
    group_by:
      fill: zero
      func: last
      duration: 1d

Then catch the value in the datalabels formatter:

  dataLabels:
    enabled: true
    formatter: |
      EVAL:function(value) {
      if (value == 0) {
        return " ";
      }
      return value;
      }

@Lunkobelix I solved the yaxis stacked max auto by adding this code:

apex_config:
  yaxis:
    forceNiceScale: true
    min: 0
    max: |
      EVAL: function(max) { return max }

image

1 Like

Unfortunately, that’s not what I mean, what you have is stacked vertically

Hi
Sorry for digging up such an old post, but I’m browsing throughout the forum to increase my knowledge on Apex, and see that you are able to combine bars and line with the line in front of the bar.:+1:
Can you please share config of that card (if you still have it), so I can see the magic that I’ve missed :smirk:

Thanks @Kertz1954 for your link but the situation is as follows;
i have 4 entities;

  • Sun,
  • own use,
  • consumption (net) and
  • production (net)
    There is always either consumption or production.
    So I want consumption and production as stacked column.
    And “sun” and “own use” in a normal column.
    Is that possible?

Unfortunately you cannot have a mixture of stacked or not stacked in the same chart.
I also believe you are looking for a horizontal type column/bar chart based on your previous reply to my earlier response.
This is not supported with the current version of the Home Assistant ApexCharts card.

Added bonus of using ‘new’ Template is that you can reload them without restarting HA

I guess that is true:

  • if you have recorder set to purge 7days,
  • and your sensor is not configured as long term statistics.

You can configure your template-senors as long term statistics, and then get long term data stored.

I have configured a bunch which I’ve used custom history explorer card to show, but now looking to dive into a Apex hole as well :stuck_out_tongue_winking_eye:

1 Like

Clearly, is it then possible to apply an “if then”, for example;

series:

  • if states(“sensor.dag_afname”, > 0):
    entity: sensor.dag_afname
    name: Afname
    type: column
    unit: ’ W’
    color: darkviolet
    group_by:
    func: max
    duration: 1d
  • else:
    entity: sensor.dag_lever
    type: column
    unit: ’ W’
    color: violet
    group_by:
    func: max
    duration: 1d
  • endif:
  • entity: sensor.dag_zon
    name: Zon
    type: column
    unit: ’ W’
    color: green
    group_by:
    func: max
    duration: 1d
  • entity: sensor.dag_gebruik
    name: Gebruik
    type: column
    unit: ’ W’
    color: red
    group_by:
    func: max
    duration: 1d

Great addition for Home Assistant :slight_smile:
I’m using it for several charts. Some of them have have positive and negative values.I have two questions regarding those charts:

  1. Is there a way to draw a line at x=0 (even with a different line thickness), so that the zero line is always visible?
  2. Is there a way to have dashed line on precise values, that is on 100, 200, etc… and not saying that i want 4 or 5 dashed lines? (because that depends on the maximum and mimum values).

Thanks.
Pedro.

Do you mean x=0 or y=0?

Play around with this code and see if it helps.

apex_config:
  annotations:
    position: back
    yaxis:
      - 'y': 200
        strokeDashArray: 5
        borderColor: '#f7a6af'
        borderWidth: 1

Thanks, that’s it! … and yes it’s y=0.

  annotations:
    position: front
    yaxis: back
      - 'y': 0
        strokeDashArray: 0
        borderColor: '#FFFFFF'
        borderWidth: 1.5

Hello, I like the data labels in my chart, however I would like to display them only in case that the value > 0

  - entity: sensor.ote_sell_price
    yaxis_id: first
    type: column
    name: SELL Price
    unit: CZK
    color: Green
    show:
      datalabels: true
    group_by:
      duration: 1hour
      func: max

image

is there a way how to disable them based on value?

This should do it. Add code to the end of your chart.

apex_config:
  dataLabels:
    enabled: true
    formatter: |
      EVAL:function(value) {
        if (value <= 0){
          value = ''
        }
        return value;
      }

Just found this amazing graph card the other day. Thanks for all the effort bringing this to HA!

Is it somehow possible, to dynamically change the span.offset dynamically based on a condition?

graph_span: 2d
span:
  start: day
  offset: +1d 

The offset should be +1d or +0d depending of the current time.
Before 14:00 I want to show yesterday + today.
After 14:00 today + tomorrow.

Edit: at 14:00, new data for the next day is added. So I guess, I can easily solve that by changing it to

graph_span: 2d
span:
  end: day

Can someone help me with annotations and labels. please?

apex_config:
  annotations:
    position: back
    yaxis:
      - 'y': 35
        strokeDashArray: 5
        borderColor: red
        label:
          text: EVN
    xaxis:
      - x: new Date('2023-01-27T06:00:00Z').getTime();
        borderColor: blue
        label:
          text: target

The horizontal line works.
But the vertical doesn’t. I guess, I didn’t get the expression right.

Also I would like to know, how I can bring entities into the annotation.
Instead the constant “35” it should be an entity value.
Same of course for the Date in the x-axis annotation.