ApexCharts card - A highly customizable graph card

[Lunkobelix]

Has anyone been able to remove the red part below? Feels like the date information is unnecessary to show twice? Or is it possible to show the value in the red part and skip the top tooltip?

[MrGlad8 (Andree)]

I have a slight problem.
I have one chart that measure my heat pump energy “per hour” and one for “per day”.
And it didnt match what numbers the heat pumps own app said.
The heat-energ-sensor gives me the pumps kWh per hour.
But when I look more into it it seems that the chart takes the value in the “00:00:00” and put that value in the next day. But that is wrong and the first value for the new day should be at “01:00:00”.
How do I tell the chart to do this?

This is my code atm:

type: custom:apexcharts-card
graph_span: 48h
yaxis:
  - min: 0
    max: 1.5
span:
  end: hour
header:
  standard_format: true
  title: Värmepump - Per Timme
  show: true
  show_states: true
  colorize_states: true
all_series_config:
  type: column
  group_by:
    func: sum
    duration: 1h
series:
  - entity: sensor.daikinap42587_heat_energy_consumption
    name: Värmepump Värme Energi

[lcmg (Luis Coelho)]

Hi, not sure if will solve your issue, but try to add: “extend_to_end: false” under “series”.

[MrGlad8 (Andree)]

hm, nope it still count that data from 00:00 from the day before.
Do I need to remove something when adding it?
If I set the duration to 23 hour I get the correct sum of the kWh this current day! But is that the real solution here? hm…

[MrGlad8 (Andree)]

I think this did it for me…

span:
  end: day
  offset: +1h

That way it start the day from the data of 01 !

[RomRider]

@ntompson

One thing I’m stuck on: sometimes I like to include one or more series on a chart that I don’t want included in the legend. Is there any way I can mark a series to be excluded from the legend?

Unfortunately the library I use doesn’t allow to hide a serie from the legend.

@hajo62

Does someone know a trick how to get really nice y-axis scaling?

Only way would be to set the number of ticks I believe

@swifty

I tried out the color threshold option, but that seems to give a gradiant for each data point rather than setting the whole chart.

Also, is it possible to fade to a lower opacity for the chart (ie. fade it out at the bottom) regardless of the value? - again I can see an opacity option for the colour_threshold setting, but not sure how I can use that to get a fade so that all cards look consistent…

If the color threshold give a weird look, it’s because you have null data in your chart, that could be fixed with fill_raw: last

For your other question, you have the option to create a gradiant with options from here

@rufiik

Is it possible to fill area chart only for values below treshhold?
I’d like to fill negative temperature (below zero) on my graph, like that:

That’s not possible unfortunately. One way to hack it is to make 2 series, on which filters out everything that is >0 and displayed as an area and the other one which filters everything that is <0 and displayed as a line

@michapr

I have found (in ApexCharts docu) the “customIcons” in toolbar with the possible mapping to a function, but not sure how it could work here.

Not sure I understand what you want to achieve

@foraster

Any advice for solving this? (apart from limiting the y_axis to a min value of 0)?

Why not create a utility meter which resets every hour? (not sure it’s possible though)

@dutchguy

Any idea what is wrong here?

Why not use an annotation to highlight a band in the chart?

@BolleK

I’m guessing it is in the data_generator part but I’m not proficient enough to figure this out on my own.

You’ll need to prepend the current value with the current timestamp in the data generator

@flobidan

Any way to achieve that?

Not possible to skip a period on the timeline unfortunately. You could however stack the 3 days on top of each other using offset and reduce the timeline to only 6-22 in this case

@BratislaveBoy

Is it possible to decrease the space reserved for the header?

You could use card-mod for that

@skyborgff

How can i plot a sensor value, but subtracting the first value in the graph?

You can use group_by with the diff function and a duration of 1d

@henrikrox

is there no way to remove legends?

You can remove the legend with:

apex_config:
  legend:
    show: false

@m0uH

Is there any possibility to set the series color dynamically based on a sensor value or attribute other than config-template-card?

Not at the moment, but I might add templates like in button-card at some point

@m0uH

The zoom is reset after each update of the sensor values (without config-template-card), is it possible to keep the zoom level also in case the graph is updated by new sensor values?

That is something that might be able to fix, please open a feature request

@m0uH

I’d like to display a whole grill session at once. Is it possible to display all data starting at a specific time point and display all data up to “now”? Or all data since a sensor was “unavailable”?

Not possible at the moment, please open a feature request

@Lunkobelix

it possible to have one series area gradient like below and then add another series as a line (not area) on top of it? Looks like gradient is being applied to both series.

The gradient configuration supports to be defined as an array, that’s the way to fix your issue

@flobidan

Is there a simple way (does someone have example code) to have a horizontal dotted line in the diagram to display a threshold

Yes, you can use annotations

@armaster

I’m currently configuring my first chart and I have a question: my chard displays only one sensor data for period of 2 days. Is it possible to display max value of sensor on the right side of div id=header__states and how to do that?

That is not possible, at least for now.

@flobidan

Have I misunderstood something?

Just do return x - 4;

@MrGlad8

Or am I missing something?

You’ll need end: day to align the chart to the end of the day

@Lunkobelix

The problem is that the yaxis get’s a scale that also takes “Ampere fas 1” into consideration.

That might be a bug, please open one on gh

@Lunkobelix

Has anyone been able to remove the red part below?

You can remove that with

apex_config:
  xaxis:
    tooltip:
      enabled: false

@MrGlad8

How do I tell the chart to do this?

You can’t, apexcharts-card relies on your history, so you need to fix your sensor (or ignore the first hour like you did)

[hajo62 (Hajo)]

Is there a way to calculate the number of ticks?
i.e. for the humidity example above: (max - min) / 10 + 1 → (90 - 50) / 10 + 1 = 5

[CDRX2]

You might be able to do something with the help of config-template-card.

[hajo62 (Hajo)]

Any hints whow to do?

[CDRX2]

I’ll have to check on the apexcharts docs, might take a little time until I can give you some pointers.

[MrGlad8 (Andree)]

THanks @RomRider but it also seems that a new week start with sunday? Can you change that?
Is that btw what causing all this? It counts a week sun-sun ? In US they see sundays as the day to start the week right?

[RomRider]

end: day makes the chart end at the current day, and because we’re sunday, it ends sunday. If you want to make it end at the end of the week, then use end: week, if you display it on a monday, the chart will be mostly empty.

[RomRider]

I believe I could think about a way to make this smart, please open a feature request on GH

[hajo62 (Hajo)]

Done

Smart calculation of number of ticks

[solmoller (Henrik Møller Jørgensen)]

First: thank you for a great tool!

I’ve been able to do all sort of nice graphs for my project with apexcharts-card, but there are a few things that keep pestering me:
‘’’
xaxis:
tickAmount: 5
format: dd.klHH
‘’’

notice, that the graph displays 22 Feb at midnight. Nice!
Unfortunately, when I close the editor, the nice midnight marker disapperars:

A second issue I have is the data plotted into the future: I can’t seem to limit data to display from now to tomorrow midnight. ‘Span’ only accepts negative arguments, and I’d like to move the other way.

Third small issue: is is possible to add line breaks to titles or further customize them? Aprecharts doc implies that \n should do a line break, but alas that’s not possible

These are alle small issues - thank you!

[Kokesh (Jachym Lukes)]

I can’t remove decimals (round up the value) for some reason. Tried to use abs() in transform didn’t work.

series:
  - entity: sensor.nbg6616_netout
    unit: kB/s
    transform: return (x/-8);
    name: Wifi Download
    color: '#0000ff'

• my speed is reported by netdata from my router and returns kilobits, with negative values. So I turn it into kiloBytes and negate the value, hence *-8…
  How to remove decimals from results?

[Lunkobelix]

Can someone advise on how to combine the following:

span:
  end: day

span:
  start: month

WIthout end: day I don’t get the correct results but wthout start: month the graph doesn’t start on the first day of the month.

Please advise because I’m lost now

Edit: I’m using a Utility Meter with setting cycle: daily.

[Oretoh (Bryce Soker)]

Why does the chart keep summing data from the previous day?

The green bar, consumed energy from panels, should have been reset when a new day started and yet it create a weird sum of doubling the previous day (3.4 + 3.4 + the state value right now)

And the sensor:

Any ideas?

[Lunkobelix]

Has anyone been able to create something like this? Basically vertical bars filling up / down. Kind of like a radial bar but displayed as a standing vertical bar that fills up to a maximum value. The first one below shows the utilization of a sensor (15,8 A used out of maximum 20 A).

[CDRX2]

Might be easier to achieve with custom bar card than with apex charts.