ApexCharts card - A highly customizable graph card

You’d still only have one y-axis and then you are comparing apples with pears. So one axis may show mm but the values for min. are not shown then…Unless you ignore the fact the the min-values are shown on the mm axis ?

EDIT: here is an example on how to change the values of the series, yes…not the scale, but that could also lead to a similar result
RomRider/apexcharts-card: :chart_with_upwards_trend: A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant (github.com)

You’re right, I compare apples and pears, but I established that 1 apple ~ 2 pears.
And by default the scale is the same so 1 apple = 1 pear.

Indeed, the parameter:

transform: "return x* 4;"

Modify the value of the corresponding serie. The graphic design match my needs but the displayed value is also affected. So 1mm becomes 4mm.

I need to modify the graphic reprensentation without affecting the datas, but that may not be possible

EDIT: a temporary solution is to affect the data in mm x10 and change the label from mm to cm:

    transform: "return x/ 10;"
    unit: "cm"

So 1cm rain ~ 1h of irrigation, not so bad!
Thank you :slight_smile:

Hi

Why my apex chart header shows the last published nordpool price. I want header shows the current price.

Would be nice to get the genuine code to support you instead of having just a screenshot and dealing with all the errors from ocr .

Here is a part of the code covered by the graph (from “map((time, ind” onwards the code is missing) and therefore no chance to play around with your code
image

Thanks

Try this in the series

    show:
      in_header: after_now

Hello everyone, I have a little problem on the display of values at the top of my card, N/A while they are present on the chart.
Can you help me?
value

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 18h
cache: true
span:
  start: day
  offset: +5h
now:
  show: true
  color: green
header:
  show: true
  show_states: true
  colorize_states: true
  title: Solaire
stacked: false
apex_config:
  chart:
    height: 300px
    zoom:
      type: x
      enabled: true
      autoScaleYaxis: false
  stroke:
    show: true
  dataLabels:
    enabled: true
  legend:
    show: true
  fill:
    type: gradient
    gradient:
      inverseColors: true
      type: vertical
      shadeIntensity: 0.1
      opacityFrom: 0.6
      opacityTo: 0.1
      stops:
        - 0
        - 80
        - 100
  grid:
    show: true
all_series_config:
  group_by:
    func: last
    duration: 15m
  curve: stepline
  type: area
series:
  - entity: sensor.solar_inverter_ac_power
    color: '#ffa200'
    extend_to: false
    name: EST
    transform: return x / 1;
    unit: W
    stroke_width: 1
    float_precision: 2
    show:
      in_header: before_now
      legend_value: false
      extremas: time
  - entity: sensor.solar_inverter_temperature
    color: '#ffd791'
    extend_to: false
    name: Temp E
    unit: °
    stroke_width: 1
  - entity: sensor.solar_inverter_2_temperature
    name: Temp O
    color: '#d7dbdd'
    extend_to: false
    unit: °
    stroke_width: 1
  - entity: sensor.solar_inverter_2_ac_power
    name: OUEST
    color: black
    extend_to: false
    transform: return x / 1;
    unit: W
    stroke_width: 1
    float_precision: 2
    show:
      in_header: before_now
      legend_value: false
      extremas: time
card_mod:
  style: |
    div#state__value {
      font-size: 10px;
    }

not sure but the missing value could be the latest and the graph shown is only representing the past.

If you look carefully the time seems to have progress a bit due to the vertical line and for that moment in time there was no value available anymore.
Hence not available, while the rest of the values are still visible.

If you check it now more data might be missing or they have been coming back.

J’ai trouvé la solution, apparemment cette ligne # pose problème :

    show:
#      in_header: before_now
      legend_value: false
      extremas: time
1 Like

Hi, I love ApexCharts ! :slight_smile:

two questions :

1- Is it possible to disable this as it’s displayed on the top as well :

image

2- My graph is showing the current day, is it possible to go to the previous days (without having to edit the config and offset everything) ? I’m thinking about arrow buttons at the bottom to navigate.

Thanks !

Yes, there are a few examples in this thread…do some searching?

1 Like

my bad, will do now :slight_smile:

edit: couldn’t find anything related to my questions :frowning: probably not using the right keywords. Any pointer would be appreciated

search for config template card…it requies an input_number too

1 Like

Thanks, I found some answers but it’s a bit too complicated for me at the moment (HA newbie here…).

I just want to have buttons to shift this graph left and right to rewind time :

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 1h
all_series_config:
  stroke_width: 2.5
  extend_to: now
apex_config:
  chart:
    height: 335px
series:
  - entity: sensor.power_meter_clamp_power_2
    name: General
    curve: smooth
    group_by:
      duration: 1min
      func: avg
    color: yellow
    color_threshold:
      - value: 0
        color: yellow
      - value: 1000
        color: orange
      - value: 2500
        color: red
  - entity: sensor.remipc_plug_power
    name: remiPC
    curve: smooth
    group_by:
      duration: 1min
      func: avg
    color: violet
    color_threshold:
      - value: 0
        color: violet
      - value: 400
        color: magenta
  - entity: sensor.tv_amp_plug_power
    name: TV & Amp
    curve: smooth
    group_by:
      duration: 1min
      func: avg
    color: limegreen
    color_threshold:
      - value: 0
        color: limegreen
      - value: 100
        color: lime
  - entity: sensor.power_meter_clamp_power
    name: Water Heater
    curve: smooth
    group_by:
      duration: 1min
      func: avg
    color: cyan
    color_threshold:
      - value: 0
        color: cyan
      - value: 1000
        color: deepskyblue

I’ll come back to it in the future when I’m better at this :slight_smile:

This has been driving me up the wall. I have a pie chart that displays almost everything the way I want it to, but I don’t want to see the values inside the pie chart. I’d prefer to see the title or nothing and have it appear when you hover over it.

image

type: custom:apexcharts-card
chart_type: pie
update_delay: 3s
update_interval: 1min
header:
  show: true
  title: Top 3 .... ...
apex_config:
  legend:
    show: false
  yaxis:
    - seriesName: B
      decimalsInFloat: 0
      title:
        text: B
    - seriesName: sE
      decimalsInFloat: 0
      title:
        text: sE
    - seriesName: E
      decimalsInFloat: 0
      title:
        text: E
    - seriesName: U
      decimalsInFloat: 0
      title:
        text: U
series:
  - entity: sensor.c_b_owned
    name: B
    color: orange
  - entity: sensor.se_owned_aud
    name: sE
    color: blue
  - entity: sensor.e_owned_aud
    name: E
    color: blue
  - entity: sensor.u_owned_aud
    name: U
    color: green

I’ve tried various different things in the header, xaxis and yaxis to disable or change it but nothing seems to effect it

It is in the docs (would not mind reading these)… check for data labels

awesome… but that response isn’t very helpful sorry. Not meaning to be rude but I’ve spent a few hours trying to figure this out AND reading the docs. I only posted here are a last resort.
I’ve tried to place datalabels in various different places and I don’t seem to make an effect.
Where do I change my YAML to make this change effective?

There is an intent behind that.
I professionally do not believe that handing out the solution is adding value, loads donot read and just ask … so with the risk of sounding blunt :slight_smile:

This one works for me, donot look at the graph itself, dummy data

Thank you… that worked (kinda). I would have never gotten that just by reading the docs. The reason being, the docs are actually incorrect (then correct further down i suppose).

I followed the docs and it didn’t work. I followed your example and it worked.

Difference was “datalabels” and “dataLabels”. For some reason the “L” is case sensitive.

I hate to say it, but this is mostly the reason I hate using forums, the blunt-ness when you go into a lot of these forums gets frustrating when I try not to use it as a first resort. I understand why you want to be blunt and the reasoning behind it, but it turns soooooooo many people off and only creates anger and frustration so people give up and say “it’s too hard”. I apreciate your help, but just next time, help instead of say “hey you stupid go figure it out yourself” give some examples and realise everyone learns in a different way - is all i’m saying.

Hi everyone,
Is it possible to transform data to be displayed as icons?
Let me explain: I would like a graph that shows the wind speed as well as its direction.
I have 2 entities for the direction: a textual one (west, east, etc.) and one that indicates a numerical value of the wind angle (235°).
I would like to display one of these 2 values ​​in the graph, perhaps with arrows (see images).
Thanks for any help and suggestions
image

so I’m trying to work on this other graph but it’s got me a bit stumpped. I’m trying to create a stacked graph that shows the exact same data that is in the pie graph above. Pie shows in the instance (now) and the line graph shows over time. I want them stacked one on top of each other showing basically how they move in comparison to each other. I get some strange resaults with the YAML that i’ve come up with and not sure where I’ve gone wrong:

image

type: custom:apexcharts-card
apex_config:
  legend:
    show: false
  chart:
    stacked: true
yaxis:
  - show: false
series:
  - entity: sensor.e_combined_owned_aud
    name: E
    color: blue
    group_by:
      func: sum
  - entity: sensor.u_owned_aud
    name: U
    color: green
    group_by:
      func: sum
  - entity: sensor.b_owned_aud
    name: B
    color: orange
    group_by:
      func: sum

If I take out the hiding of the y-axis I get a better graph, but it’s still nowhere near correct:
image

To give an idea, below is the original non-stacked graph
image