ApexCharts card - A highly customizable graph card

Grateful for your support, thanks! :slightly_smiling_face:

1 Like

Hi @RomRider - great card, thanks for the hard work.

One quick question - is it possible to hide the tooltip?

Cheers,

Carl

Yep :slight_smile:

apex_config:
  tooltip:
    enabled: false

From: https://apexcharts.com/docs/options/tooltip/

I have been looking for this type of card for a long time. But for some reason i am not able to make it work with my mqtt sensors. I have a fast internet speed sensor which works but not my mqtt sensors or command line. I get the following output.
Untitled
The configurations of my card is this.

type: 'custom:apexcharts-card'
graph_span: 20m
series:
  - entity: sensor.v1_voltage

My mqtt sensor config is this.

  - platform: mqtt
    state_topic: tele/electric/SENSOR
    name: 'V1-Voltage'
    scan_interval: '10'
    value_template: "{{ value_json.ENERGY.Voltage[0] }}"
    unit_of_measurement: 'V1'
    force_update: 'true'

My sensor output is this.

image

What does the graph of your sensor look like natively in ‘Developer Tools’ of Home Assistant? an example in picture below. I’m not sure a value for ‘unit_of_measure’ of ‘V1’ is ‘valid’. I’m not sure this is what is confusing the ApexChart add in, but you might want to force it to something like ‘Volts’, especially of Home Assistant is not offering a graph.

1 Like

Make sure your sensor is not excluded from the recorder.

Also @dproffer, the unit is just text, it could be anything, there’s no logic behind :blush:

1 Like

It seems that I had excluded it from recorder as I was using influxdb with them. thanks for the tip.

This looks fantastic!
Is there a way to define the y axis in more detail? I have the following, but can I set the range of the y-axis to my own value ? This chart, for example, is tracking battery drain and I would like the voltage y-axis to show 3.3-3.7v, and not to be determined by the data itself.

You can do it by using the apex_config part of the config:

apex_config:
  yaxis:
    min: 3.3
    max: 3.7

From: https://apexcharts.com/docs/options/yaxis/

1 Like

Thanks for the quick response - but that doesn’t do what I need. It seems to enforce a min/max value, but only sets the y-axis to those is the data fills that range - ie it clips the data. It doesn’t seem to force those values if the data is within them ?

yaxis sits directly under apex_config not under chart. Your indentation is off by 1 tab for yaxis (it should be same level as stroke for eg.) :wink:

1 Like

Thats done it - thanks! I was trying all sorts of positions for it - but only when I hit ‘save’ did it update so I assumed I was doing it wrong! The others settings seems to reflect in the preview straight away.
:slight_smile:

Are you using the latest beta version? If no, the GUI preview was broken before that, this is probably why it wasn’t properly updated.

No - I’m on the release version - so that would explain it.

When using multiple periods of data on the same chart, the current day value expands with a straight line till the end of the day (the part where there is no data yet). Is it possible to not show this line somehow?

Yes, add extend_to_end: false to the serie :slight_smile:

Is there a way to reduce the height of this card. I am asking because I have a vertical stack card with a number of graphs but when I have panel mode on, a single graph itself takes the whole page. If i could reduce the height, it would have been neat and I could include atleast 3 or 4 cards in a single view.

Great, thanks! I knew it was possible but I could not find it anymore :blush:

1 Like

Yes, it’s possible:

apex_config:
  chart:
    height: 250px # or anything else
1 Like

I have a card with 3 series; the 1st series ‘Water’ and is in Celsius, the 2nd and 3rd series are in Watts. I would Celsius and Watts to have their own y axis. When I try this the Y axis labels are shown to 15 decimal places. What I’m I missing to show to 1 decimal place?