ApexCharts card - A highly customizable graph card

:eyes:

image image

If you are looking for things that might be useful if given some type of dynamic content from HA passed to ApexCharts:

Be able to a minimum send ‘first’ and ‘last’ values of series to dataPointIndex. More would be to be able to send a ‘every(x) list of values’ to it as well.

      markers:
        size: 5
        colors: '#0000ff'
        discrete: [{
          seriesIndex: 0,
          dataPointIndex: 3,
          fillColor: '#e3e3e3',
          strokeColor: '#ff0000',
          size: 25

back to my poorly worded request about dynamic y axis, I will try again, would like to be able to send a entity value to both ‘min’ and ‘max’. Ideally a jinja function that would for example return a number for the min and/or max value based on an entity like ‘month of year’ then do a modulus division division on that number and multiply it by a value to get a different y max and y min depending on what quarter of the year it is. Again, letting ApexCharts choose the min and max by itself does not yield a useful visualization. Fixing the upper and lower bound ‘manually’ but different depending on a factor the author sets, allows proper visualization of slope of lines/data. Important for users to understand trends. Thx!

      yaxis:
        - seriesName: Backyard Govee Temp
          title:
            text: 'Temperature °F'
          show: true
          showAlways: true
          showForNullSeries: true
          opposite: false
          reversed: false
          logarithmic: false
          tickAmount: 6
          min: 30
          max: 100

I have a graph for the forthcoming year and have used

xaxis:
  labels:
    format: 'MMM'

which displays the date as Jan/Feb/Mar etc along the x axis.

However when mouse overing the graph the tooltips comes out as

Feb 1st, 00:00:00

I’d like to change the format of the tooltip to simply Feb in this case. Using the below does not appear to work.

tooltip:
  x:
    format: 'MMM'

I guess I could do something about it.
Please open a feature request :slight_smile:

Would also be nice if the language in the tooltip followed the system language like everything else. I have Swedish everywhere but the month in the tooltip is in English. But now we are into the really small details :grinning:

Please head over to github with feature requests, I can’t track them here. Thanks :slight_smile:

2 Likes

Any kind of entities are now supported using transform, including binary_sensor, etc… :tada: in the latest beta release. I made it generic so you can do what ever you want. And you can also do anything with the values (eg. multiply by 1000 or apply some weird maths on top of it).

Download the latest beta and check the dev branch README for information on how to use it :slight_smile:

Feedback welcome.

1 Like

OK so I added some fill options and the magenta line disappeared here

type: 'custom:apexcharts-card'
graph_span: 24h
header:
  show: true
  title: NUC Memory Graph
apex_config:
  yaxis:
    forceNiceScale: true
  responsive:
    - breakpoint: 765
      options:
        chart:
          height: 500px
    - breakpoint: 1025
      options:
        chart:
          height: 400px
    - breakpoint: 10000
      options:
        chart:
          height: auto
  stroke:
    width: 3
    curve: smooth
  chart:
    zoom:
      enabled: true
    toolbar:
      show: true
      tools:
        zoom: true
        zoomin: true
        zoomout: true
        pan: true
        reset: true
  plotOptions:
    bar:
      columnWidth: 10%
  legend:
    showForSingleSeries: true
  fill:
    type: solid
    opacity: 0.2
series:
  - entity: sensor.memory_use_percent
    name: Percent Memory Used
    type: area
    color: cyan
    group_by:
      func: raw
      duration: 15min
  - entity: sensor.nuc_memory_used_filtered
    name: Memory Use Filtered
    type: line
    color: magenta
    group_by:
      func: raw
      duration: 15min

image

Without that fill option it would display similar to this one:
image

EDIT: Looks like I can do with “transform” in the Dev release. Will wait for that to go Prod before I have a fiddle… :slight_smile:

Ok - I’ve been following this since announced and decided to bite the bullet and implement today.

I already have a question: If I have a data series and zero values are invalid, can I ignore those values? I can see examples where it ignores null, but not zero. My sensor unfortunately occasionally errors and gives an erroneous zero result.

I know I could (should have) template the sensor, but I have a year’s worth of historical data I want to plot.

I am learning here as well, but can say I am very impressed by @RomRider 's work.

I watch the documentation on the development channel to see what is coming, I recommend:

https://github.com/RomRider/apexcharts-card/tree/dev

to that and your question, I would look into:

‘fill_raw’

followed by, if that does not meet needs,

‘transform’

Good hunting1!

I find @RomRider 's code very solid, I would not feel bad in anyway about recommending that you hop on the beta channel. Not only is it good to get moving forward on ideas sooner, @RomRider can use your input on how things are working. Do contribute, it helps all.

Yeah thanks - we crossed streams there. :slight_smile:

I think I will need something like:

transform: "return x === 0 ? null : x;"

In combination with fill_raw.

1 Like

You might want to try: fill: [0.2, 0.2] instead

Exactly!

2 Likes

I got the missing data to be filled by using group_by

group_by:
  func: last
  duration: 3min

Thank you for the help!

group_by reduces the “resolution” of the chart, it’s like compressing an image but here were talking about history data. If you want to keep the details you should use the upcoming: fill_raw

1 Like

Super, thanks! Looking forward to that!

Ik love this card, currently switching al my graphs to this card :slight_smile:

I don’t know if it’s my config, but I see 2 strange things:

De first day in the X axis is not visible;
The date of february the first is shown as 21 instead of 01.
Using v1.4.0

My config of 1 card:

type: 'custom:apexcharts-card'
graph_span: 7d
span:
  end: day
header:
  show: true
  title: Verbuik elektra per dag in kWh
apex_config:
  chart:
    type: area
    height: 250
  stroke:
    show: true
    width: 1
    curve: smooth
  legend:
    show: true
  dataLabels:
    enabled: true
  fill:
    type: gradient
    gradient:
      shadeIntensity: 0.1
      opacityFrom: 0.25
      opacityTo: 1
      inverseColors: true
      stops:
        - 0
        - 90
        - 100
series:
  - color: 'rgb(138,43,226)'
    entity: sensor.energy_import_total_dagelijks_kwh
    type: column
    group_by:
      func: max
      duration: 24h
4 Likes

For the date I fixed it by adding this:
apex_config:
xaxis:
labels:
format: dd-MMM

Now with the Xaxis it’s changing from time to time, I have or your view with a missing date or a 3 date view, can’t find a way to get changing dates fixed…

2021-02-04 10_14_01-Test Board - Home Assistant and 1 more page - Work - Microsoft​ Edge

3 Likes

The great work continues!
I have converted my binary sensor using a template, and not have a 1 or 0. When I try to plot this to indicate if a heater is on, I can only get curved lines. How do I make these nice and square - ie binary ? I have tried all the graph types I can see!

Indeed, set the graph_span: to 5d will show the dates too, but not the first one.

Added the label format , first day of february is fixed, thanx .

1 Like