ApexCharts card - A highly customizable graph card

the bar chart is negative on purpose, this is energy exported and imported fromthe grid.

The yellow line is my PV Battery charge level in %, but it looks like its starting on the left hand Y axis, and not the Right which is the axis is assigned to…

Is there any way we can plot a graph of the difference between two series?

image

        series:
          - entity: sensor.p1_meter_5c2faf04a1f2_active_power
            transform: "return x >= 0 ? x : 0 ;"
            name: Opbrengst
            color: rgb(66,73,241)
            float_precision: 2
            extend_to: now     

          - entity: sensor.p1_meter_5c2faf04a1f2_active_power
            transform: "return x <= 0 ? x : 0 ;"
            name: Verbruik
            color: rgb(11,252,3)
            float_precision: 0
            extend_to: now

Now you can see that 0 is a green line. Can I remove that zero line ?

Nice color fading :slight_smile: What settings did you use to get that? Gradient or color_threshold?
Willing to share the code?

You can see it in a post from 2 days ago…

1 Like

Hello folks!
I’m trying to graph the wind, and I can’t figure out how to have non-numeric values as the Y axis. I’ve made another thread about it here - if anybody has any insight into how to either graph “weather cardinal” values (n, s, e, w, nnw, ese, wsw, etc) or convert the numeric value (wind direction represented in 360 degrees) into a dot/plot chart like in my thread, I would be very grateful!

Is it possible to combine two entities in a series?
For example in a line graph showing one entity for my PS4 usage, but then one line showing two different TV usages shown as one value, not a separate line for both.

At the moment I have it as a bar graph that has been stacked, which does add them together, but I’d prefer it as a line.

what If I don’t want the 0 value to be seen ?

I use null to remove any graph
transform: "return x >= 0 ? x : null ;"

1 Like

I am trying to visualize what you want but … if you have a x with timeseries on regular distance and filter out the negative/zero value than you graph will probably show gaps …

I have a chart in gradient blue. When it goes below zero I want the chart in gradient green…
It was told that you cannot change color when you want it in gradient.
So I made 2 charts. 1 with values above 0, 1 with values below zero. But it doesnt look nice to have 0 zero value, so I want it removed…

that is what I want ! Top. Thanks

I have red a few questions here about wind plots of some kind, I can’t answers these questions but if you are looking for a way to plot wind speed and direction I have had good luck with this card.

Is it possible to show multiple entities at once in the tooltip when using the line graph?

In the apexchart documentation there is the “shared” keyword für the tooltip. I tried it but no success. I am either doing it wrongly or it is not implemented. I seen to remember seeing it done though.

I’m using the color_threshold in an Octopus Price chart so different price thresholds change the bar colour.

Would it be possible to template the value?

Hey everyone,

Is there an actual way to share the tooltip? A viable way that actually functions in every single way, without a bug of some sort?

Cause i’ve been really trying do figure this out for the last couple days and couldn’t find anything.

Thank you.

When scrubbing/hovering over the graphs, the pop-up says “Today”. But as you can see that temperature is from two days earlier (Today is Dec 1st). Is it supposed to be like that?

Screenshot 2023-12-01 at 01.04.37

1 Like

Hi - I want to exclude in my apex chart entitites, that are not available. Current the charts is only display information, when all entities are available.

I used therefore the following script:

type: custom:apexcharts-card
graph_span: 8h
update_interval: 60sec
header:
  show: true
  title: Docker Memory Overview -8h
  show_states: false
  colorize_states: true
series:
  - entity: sensor.docker_audiobookshelf_memory
    stroke_width: 2
  - entity: sensor.docker_icarus_memory
    stroke_width: 2
  - entity: sensor.docker_minecraft_bedrock_2_memory
    stroke_width: 2
  - entity: sensor.docker_minecraft_bedrock_memory
    stroke_width: 2
  - entity: sensor.docker_omada_controller_memory
    stroke_width: 2
  - entity: sensor.docker_valheim_server_memory
    stroke_width: 2
state_filter:
  - operator: template
    template: '{{ states[entity].state != "unavailable" }}'
    entities:
      - sensor.docker_valheim_server_memory
      - sensor.docker_icarus_memory
      - sensor.docker_minecraft_bedrock_2_memory
      - sensor.docker_minecraft_bedrock_memory

But I get this error: /// apexcharts-card version 2.0.4 /// value.state_filter is extraneous

If for example the entity is not there, because the docker container is shutdown, it should be exluded from the graph.
image

I am greatful for any help :slight_smile: Thanks a lot,
Mark

Hi guys, i need some help

My main goal is this:

  • Compare today usage with last year usage on the same day, if possible that it shows if im using more or less…

But i try to understand how this works so i wnted to create a sort of total from last month.
When i use this code it works, however it adds the hours from today to the total as well…
How can i only show just only last month without calculating the value from today?

type: custom:apexcharts-card
header:
  show: true
  title: Energy usage
  show_states: true
  colorize_states: true
span:
  end: month
  offset: -8h
show:
  last_updated: false
series:
  - entity: sensor.p1_energytotal
    type: column
    group_by:
      func: delta
      duration: 1month
      start_with_last: false
    offset: '-1month'