ApexCharts card - A highly customizable graph card

RomRider · February 4, 2021, 9:12pm

Then do it in the opposite way:
transform: 'return x === "on" ? 5 : 0;'

ninjaef · February 4, 2021, 9:21pm

I just cut & pasted your example in your github.
Anyway, that works now.

Did you spot the user error? I had 5 as the “on” whereas the Y axis floor is 10 !!!
Changed 5 to 12 and 0 to 10 , gives a “digital” line appearance.

type: 'custom:apexcharts-card'
header:
  show: false
series:
  - entity: sensor.ble_temperature_lounge
    name: Lounge
  - entity: sensor.ble_temperature_dad
    name: Dad
  - entity: sensor.ble_temperature_summer
    name: Summer
  - entity: sensor.ble_temperature_guest
    name: Guest
  - entity: sensor.ble_temperature_kitchen
    name: Kitchen
  - entity: switch.danfoss_ch_2
    name: CH(Ch2)
    curve: stepline
    transform: 'return x === "on" ? 12 : 10;'
graph_span: 12h
update_interval: 5m
cache: true
apex_config:
  yaxis:
    title:
      text: Temperature °C
    show: true
    showAlways: true
    showForNullSeries: true
    opposite: false
    reversed: false
    logarithmic: false
    tickAmount: 10
    min: 10
    max: 25
    forceNiceScale: false
    floating: false
    decimalsInFloat: 0

All working and thank you for your kind help and a wonderful resource.

One improvement (and it’s great already) would be to have a seconday Y axis (I would then plot to that axis for the switch)

EDIT:
Found this

but not sure how that translates into yaml and the card config, because the example in apexcharts uses one series for each axis where I have 5 temp measures for one Y axis and the switch for the second Y axis. Mmmm

RomRider · February 4, 2021, 9:44pm

Multi-Y axis is not very user friendly for now.
You have to invert the logic:

define 2 axis
first axis is your first entity of series (in your case it should be the switch). Also put it on the opposite side
second axis will take everything else

This is why it’s not documented

RomRider · February 4, 2021, 9:55pm

New Release

1.5.0 (2021-02-04)

Informations

transform will allow you to assign any type of entities in the chart, for eg. binary_sensors or switches

People using:

apex_config:
  dataLabels:
    enabled: true

Will have to use the series.show.datalabels instead:

series:
  - entity: sensor.my_sensor
    show:
      datalabels: true

Features

series.show: Show/hide dataLabels per serie (9e28db3)
Support for 12-hour format (#55) (f38a18e), closes #48 #53
now: Add a marker at the current time on the chart (9b6b83d), closes #44
series: transform the data the way you want (#45) (1cb6bb5)
series: New fill_raw option to fill missing data in raw history (e2433b6)

Bug Fixes

dataLabels would not follow float_precision (cf9b63a), closes #54
Float were not displayed in non-timeline charts (e67d2d7), closes #42

Documentation

Fix HACS doc (not yet available by default) (53fece2)
Fix typo in doc (89ed3c5)
Missing link to the now section (9747257)

ninjaef · February 4, 2021, 10:01pm

mmmm
so I am nearly there, but not quite, any idea what’s wrong with this?
only the blue plot is correct, the others at the top range from 17 to 19C but plotted above 23.8

Reorganised the entities and two Y axis defined.

type: 'custom:apexcharts-card'
header:
  show: false
series:
  - entity: switch.danfoss_ch_2
    name: CH(Ch2)
    curve: stepline
    transform: 'return x === "on" ? 0 : 0.1;'
  - entity: sensor.ble_temperature_lounge
    name: Lounge
  - entity: sensor.ble_temperature_dad
    name: Dad
  - entity: sensor.ble_temperature_summer
    name: Summer
  - entity: sensor.ble_temperature_guest
    name: Guest
  - entity: sensor.ble_temperature_kitchen
    name: Kitchen
graph_span: 12h
update_interval: 5m
cache: true
apex_config:
  yaxis: 
    - title: 
        text: "Switch"
      opposite: true
      min: 0
      max: 1
      tickAmount: 1   
    - title:
        text: Temperature    
      min: 15
      max: 25
      tickAmount: 8

I don’t really need/want the 0 and 1 on the righthand Y axis, it is just for reference whilst I am testing. I will turn them off eventually.

RomRider · February 4, 2021, 10:26pm

You are right… Seems like yaxis is worse than I thought it would be…

You’ll have to define as much yaxis as there are entities defined in series.
They will have to have the same min and max and only the first one for temperatures should have show: true, all the others should have show: false

apex_config:
  yaxis: 
    - title: 
        text: "Switch"
      opposite: true
      min: 0
      max: 1
      tickAmount: 1   
    - title:
        text: Temperature    
      min: 15
      max: 25
      tickAmount: 8
    - show: false
      min: 15
      max: 25
    - show: false
      min: 15
      max: 25
    - show: false
      min: 15
      max: 25
    - show: false
      min: 15
      max: 25

Kinda sucks, but multi-y axis is not so great in ApexCharts. You map axis to series and not the other way round

dproffer · February 4, 2021, 10:37pm

@RomRider I’m not understanding the placement and correct syntax for this option, can you give a full example, thx.

ninjaef · February 4, 2021, 10:38pm

Hey , i appreciate your help , wow, I have no idea how to map the apex syntax to yaml . How did you figure it out.

All good for now thanks. I will play around now that I have a working baseline.

RomRider · February 4, 2021, 10:38pm

Like so:

series:
  - entity: sensor.test
    show:
      datalabels: true

DavidFW1960 · February 4, 2021, 10:46pm

So that then changes the fill to a list:

type: 'custom:apexcharts-card'
graph_span: 24h
header:
  show: true
  title: NUC Memory Graph
apex_config:
  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:
    - 0.2
    - 0.2

But it does nothing?

RomRider · February 4, 2021, 10:48pm

My bad, back to your original config: opacity: [0.2, 0.2] instead of opacity: 0.2

dproffer · February 4, 2021, 10:50pm

Thx!

You might want to revisit the documentation section on ’ series.show Options’ it does not seems to ‘flow/read’ the same as other sections.

Any possibility of a ‘every X’ points option for ‘datalables’? You have to have mighty few points to NOT make this messy, especially hard for massive data guy

RomRider · February 4, 2021, 10:51pm

Nope, I’ve looked if it was possible already and unfortunately not.

DavidFW1960 · February 4, 2021, 10:53pm

  fill:
    type: solid
    opacity:
      - 0.2
      - 0.2

Still looks like no opacity at all…
The first graph uses that code, the second one doesn’t.

When I just had the original 0.2 it just wasn’t showing the line for the second entity

RomRider · February 4, 2021, 10:56pm

Ah right, I forgot I override the values in the code.
Might want to open a bug

Tdw · February 4, 2021, 11:01pm

Outstanding card; thank you for contributing to the community. I can’t find the style attribute to change the font of the chart itself (primarily the legend but axis ideally as well). Any suggestions?

Also, I believe the apex github docs say functionality does not exist to change line and/or area color based on state value. That your understanding?

RomRider · February 4, 2021, 11:04pm

You have fontFamilly for legend: legend – ApexCharts.js
Equivalent for axis and mostly any other object in ApexChart

It exists but it’s not based on the data value. I’m looking at a way to provide this feature, but it’s a bit bugged at the moment in ApexCharts and I don’t like bugs… feat(colors): Support for color_thresholds by RomRider · Pull Request #38 · RomRider/apexcharts-card · GitHub

ninjaef · February 4, 2021, 11:10pm

Just found something weird.

This works card config works perfectly on my Win10 laptop:

type: 'custom:apexcharts-card'
header:
  show: false
series:
  - entity: switch.danfoss_ch_2
    name: CH(Ch2)
    curve: stepline
    type: line
    transform: 'return x === "on" ? 0 : 0.1;'
  - entity: sensor.ble_temperature_lounge
    name: Lounge
  - entity: sensor.ble_temperature_dad
    name: Dad
  - entity: sensor.ble_temperature_summer
    name: Summer
  - entity: sensor.ble_temperature_guest
    name: Guest
  - entity: sensor.ble_temperature_kitchen
    name: Kitchen
graph_span: 12h
update_interval: 5m
cache: true
apex_config:
  stroke:
    width:
      - 1
      - 3
      - 3
      - 3
      - 3
      - 3
    curve:
      - stepline
      - smooth
      - smooth
      - smooth
      - smooth
      - smooth
  yaxis:
    - title:
        text: Switch
      opposite: true
      min: 0
      max: 1
      tickAmount: 1
    - title:
        text: Temperature
      min: 15
      max: 25
      tickAmount: 10
    - show: false
      min: 15
      max: 25
    - show: false
      min: 15
      max: 25
    - show: false
      min: 15
      max: 25
    - show: false
      min: 15
      max: 25

But on my Android 10 mobile, when open the view tab with the chart on, it is the red card where at the top it states:
value.series[0] is not a Chart CardSeriesExternalConfig;
value.series[0].transform is extraneous

I have changed the width of the CH2 plot, which is width 1 and the other 5 plots are width 3,
Same card config, works on laptop, error on phone
?
Any ideas?

RomRider · February 4, 2021, 11:12pm

clear your cache on your mobile phone

I really suggest you use HACS, it avoids a lot of this caching non-sense…

ninjaef · February 4, 2021, 11:34pm

It’s not that.
I’m using the companion app not browser. in chrome on my mobile it is fine, but if i use the HA app then it throws the error. if i remove the apex config for stroke then it works again in the HA app

I cleaned cache on the mobile chrome app , but to no effect … it was ok in the browser app anyway.