ApexCharts card - A highly customizable graph card

Hi everyone,

i have a binary sensor and i want to display its attributes.
The problem is that shows double values ​​in the diagram.
16.04 the binary sensor was activated, but it shows me the 17.04. but also.
And with the same date as on April 16.
Today I shouldn’t have any data.

What did I do wrong?
Thanks.

image

type: 'custom:apexcharts-card'
update_delay: 8s
graph_span: 7d
all_series_config:
  stroke_width: 0.8
  opacity: 0.8
  unit: min
span:
  end: day
header:
  show: true
  title: Bewässerung der letzten 7 Tage
  show_states: true
  colorize_states: true
apex_config:
  grid:
    show: false
  chart:
    height: 300
  plotOptions:
    bar:
      columnWidth: 80%
  yaxis:
    - show: false
      decimalsInFloat: 0
  xaxis:
    axisBorder:
      show: true
    labels:
      style:
        fontSize: 12px
        fontFamily: null
now:
  show: false
  label: jetzt
  color: '#bf5e5e'
series:
  - entity: binary_sensor.irrigation_unlimited_c1_z1
    attribute: today_total
    type: column
    name: Einfahrt
    color: '#bf5e5e'
    group_by:
      func: last
      duration: 1d
    show:
      datalabels: true
  - entity: binary_sensor.irrigation_unlimited_c1_z2
    attribute: today_total
    type: column
    name: Eingang
    color: '#3b6ba1'
    group_by:
      func: last
      duration: 1d
    show:
      datalabels: true
  - entity: binary_sensor.irrigation_unlimited_c1_z3
    attribute: today_total
    type: column
    name: Streifen Haus
    color: '#3ba190'
    group_by:
      func: last
      duration: 1d
    show:
      datalabels: true
  - entity: binary_sensor.irrigation_unlimited_c1_z4
    attribute: today_total
    type: column
    name: Streifen Nachbar
    color: '#93599e'
    group_by:
      func: last
      duration: 1d
    show:
      datalabels: true

Why don’t you use Utility Meter - Home Assistant ?

Use extend_to_end: false

Hey all,

Like everybody else , love this card have been studying this channel quite a lot. The examples in this channel with the apex config examples really help a lot ! Would suggest to add them to the github.

I’m wondering if somebody knows how to add a different scale axis on the right sight with apex config ? Would like to add the consumption and generation with a dotted line in this graph below. Will add the code for other people once if added the dotted line and axis so they can also use it ! Thanks a lot !

2 Likes

I think I’m one step further but still no luck.
I was wrongly understanding the format. Reading better the documentation the first field need to be the timestamp in ms (done) and second field need to be a number or float. I think the issue could be that I’m passing a full string.
Anyone had same issue or has any sugestion on how to overcome? would it work trying to manipulate the string using “templating” (I’m not familiar with this). Thanks in advance for any sugestions.
current format of the sensor:
‘[[1618527600000, 11.23], [1618614000000, 12.39], [1618700400000, 2.88]]’

Use JSON.parse()in data_generator if the data is a string

The only way I have found to add a second axis is actually to define y-axis values for all series individually. However, it is pretty flexible, and you can selectively choose which axes you want to display (e.g. if you have multiple between the same set of values), and which ones should appear on the right using opposite: true. You basically just need a ‘yaxis’ section that matches (in order and number) the series you have.

I’m currently evaluating a shower sensor using the trend binary sensor, and have got the below Apex card to visualise all the 4 things I want to see. Humidity % (closer left axis), two binary sensors between 0-1 (right axis - the second one is hidden), and the trend gradient (far left axis).

In that order, I have configured the axes like this:

apex_config:
  chart:
    height: 600
  grid:
    show: false
  yaxis:
    - show: true
      decimalsInFloat: 0
      min: 40
      max: 100
      tickAmount: 3
    - show: true
      decimalsInFloat: 0
      tickAmount: 1
      min: 0
      max: 1
      opposite: true
    - show: false
      min: 0
      max: 1
      opposite: true
    - show: true
      decimalsInFloat: 3
      min: 0
      max: 0.5
      tickAmount: 4
series:

Thanks a lot ! What I still don’t fully understand is how you mach the axis with the different data series you have. Would be great if you can explain

The 1st yaxis is for the 1st serie, the 2nd yaxis for the 2nd serie, etc…

1 Like

Many thanks, I will research, I’m not familiar with javascript :slight_smile:

RomRider is correct - there is no explicit matching. You just have to rely on the order of axes and series matching each other.

This is a stripped down version of the axes and series section of the card - I have 4x yaxis entries and 4x series entries, where the first axis entry configures the bathroom humidity sensor, the second configures the shower started sensor etc:

apex_config:
  chart:
    height: 200
  grid:
    show: false
  yaxis:
    - show: true
      decimalsInFloat: 0
      min: 40
      max: 100
      tickAmount: 3
    - show: true
      decimalsInFloat: 0
      tickAmount: 1
      min: 0
      max: 1
      opposite: true
    - show: false
      min: 0
      max: 1
      opposite: true
    - show: true
      decimalsInFloat: 3
      min: 0
      max: 0.5
      tickAmount: 4
series:
  - entity: sensor.bathroom_humidity
    stroke_width: 1
    curve: stepline
  - entity: binary_sensor.bathroom_shower_started
    stroke_width: 1
    curve: stepline
    transform: 'return x === ''on'' ? 1 : 0;'
  - entity: binary_sensor.bathroom_door_sensor
    stroke_width: 1
    curve: stepline
    transform: 'return x === ''on'' ? 0 : 1;'
  - entity: sensor.bathroom_shower_sensor_gradient
    stroke_width: 1
    curve: stepline
1 Like

Just did some configuration based on this post :slight_smile:

They say sharing is caring so there you go :

image

type: 'custom:apexcharts-card'
graph_span: 4hr
header:
  show: true
  title: CO2 Reading
  show_states: true
  colorize_states: true
now:
  show: true
  label: NOW
  color: red
apex_config:
  yaxis:
    min: 200
    max: 1800
    decimalsInFloat: 0
    seriesname: ppm
  labels:
    show: boolean
  markers:
    size: 4
    colors: white
    strokeColors: black
    strokeWidth: 2
    hover:
      size: 7
  stroke:
    width: 2
  annotations:
    position: back
    yaxis:
      - 'y': 0
        y2: 500
        strokeDashArray: 3
        borderColor: '#000000'
        fillColor: '#ADFF2F'
        borderWith: 4
        label:
          borderColor: '#ADFF2F'
          borderWidth: 0
          borderRadius: 0
          text: Fresh - No complaints
          textAnchor: middle
          position: left
          offsetX: 210
          offsetY: 40
          style:
            background: transparent
            color: '#ffffff'
            fontSize: 15px
            fontWeight: 100
            fontFamily: Segoe UI
            cssClass: apexcharts-xaxis-annotation-label
      - 'y': 500
        y2: 1000
        strokeDashArray: 3
        borderColor: '#000000'
        fillColor: '#FFA500'
        borderWith: 4
        label:
          borderColor: '#ADFF2F'
          borderWidth: 0
          borderRadius: 0
          text: Stale - Ventilate
          textAnchor: middle
          position: left
          offsetX: 210
          offsetY: 20
          style:
            background: transparent
            color: '#ffffff'
            fontSize: 15px
            fontWeight: 100
            fontFamily: Segoe UI
            cssClass: apexcharts-xaxis-annotation-label
      - 'y': 1000
        y2: 2000
        strokeDashArray: 3
        borderColor: '#000000'
        fillColor: '#FF0000'
        borderWith: 4
        label:
          borderColor: '#ADFF2F'
          borderWidth: 0
          borderRadius: 0
          text: Danger - Harmfull for your health
          textAnchor: middle
          position: left
          offsetX: 210
          offsetY: 48
          style:
            background: transparent
            color: '#ffffff'
            fontSize: 15px
            fontWeight: 100
            fontFamily: Segoe UI
            cssClass: apexcharts-xaxis-annotation-label
series:
  - entity: sensor.esp32_co2_dust_1_co2_value
    type: line
    color: white
    float_precision: 0
    name: Consumption
    group_by:
      func: max
      duration: 5min
6 Likes

thanks, great idea for the purpose, will copy :wink:

only gripe I have with this is the colors on the background are so faded:

You can just change the colors to your liking … i think you mean issue with gripe right :wink:

Does someone have an example, how to color-code a column type (bars) chart in a manner that every 7 bars the same color is used? I would like to easier see which bar is one week older than the current without counting. (when I got more data, the graph will display 4 weeks or a month)


Or - as a smaller solution - mark sundays or weekends…

sure, dont take my ‘gripe’ for a complaint :wink: its more of a nuisance I can’t get it right. The background colors get a haze over them (is it opacity maybe?), while I simply configured the colors to be regular green, red, yellow etc etc.

:+1:

In my screenshot above, I would like to have the most left and right the same color because both show a Monday value. Covid-Case-Submission has a kind of 7 day period; Monday values are always lower than Sunday values and the same color (or darker with same color or a different background) would help to find same days and would make it easier to find a tendence…

Did you try to play with the orientation of the annotation bars ? Could be that you just have something from your graph over the bars ?


annotations:
position: front

Does somebody have a better solution for centering/ positioning the text in the background. Now it’s on a different place on different browsers. Especially on your phone.

dont think so, this is what I use, and was made by Romrider, the maestro himself :wink:

  - type: custom:apexcharts-card
    header:
      show: true
      title: Windkracht
      show_states: true
    graph_span: 3d
    series:
      - entity: sensor.wind_bft
        stroke_width: 2
    apex_config:
      yaxis:
        max: 12
        min: 0
      annotations:
        position: back
        yaxis:
          - y: 2
            y2: 0
            strokeDashArray: 0
            fillColor: lightblue
            borderColor: '00000000'
          - y: 4
            y2: 2
            strokeDashArray: 0
            fillColor: yellow
            borderColor: '00000000'
          - y: 6
            y2: 4
            strokeDashArray: 0
            fillColor: green
            borderColor: '00000000'
          - y: 8
            y2: 6
            strokeDashArray: 0
            fillColor: orange
            borderColor: '00000000'
          - y: 10
            y2: 8
            strokeDashArray: 0
            fillColor: maroon
            borderColor: '00000000'
          - y: 12
            y2: 10
            strokeDashArray: 0
            fillColor: black
            borderColor: '00000000'

Guys, anybody knows how to fill the card with graph without any margins but with legend on top?