ApexCharts card - A highly customizable graph card

robindeurloo · April 2, 2023, 8:08pm

Hey people, relatively new to doing anything other then standard HA cards and I like the puzzle/challenge, but I ran into one I could not figure out.

Trying to make 2 charts for my electrical use for the current month and the previous month.
1 has and Offset of -30 days
Both read and display the data, but some how the scale on both is different.

code below, the only difference with the other charts is that that does not have the offset in it

type: custom:apexcharts-card
update_interval: 24hour
yaxis:
  - min: 0
header:
  show: false
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
apex_config:
  chart:
    height: 300px
  legend:
    show: false
  tooltip:
    x:
      format: dd MMM yyyy
    fixed:
      enabled: true
      position: topLeft
      offsetX: 10px
      offsetY: 10px
graph_span: 30days
span:
  start: month
  offset: '-30days'
series:
  - entity: sensor.p1_meter_3c39e72cd4f0_total_power_import
    group_by:
      func: delta
      duration: 1d
    type: column
    name: Daily use

I expect it has something to do with the value on the y-axis, tried to set that to max: 20, like I did with min:0 but that does not do anything.

Any help would be appreciated

boheme61 · April 2, 2023, 10:24pm

Yaxis, is the vertical, they will “adapt” as you have 14x, on first, it shows14x, the second only have 11x (currently as highest) so only shows 11x

xaxis (april)… hard to tell , as you don’t seems to show the code for both

robindeurloo · April 3, 2023, 6:46am

The code for both is exactly the same, only different is the offset: ‘-30days’ in the one for March.
But why is the width (x-axis) so different on both? Why is the April one so short in the middel and the March one filled all the way to both sides? I would expect them both to be filled all the way to both sides.

And is there a way to force the y-axis to show maybe to 20 instead of being dynamic?

Kneh · April 3, 2023, 8:44pm

In the sjabloon editor, if i do this:

{{ state_attr('sensor.rest_gw2000_xs','values')[0][0] }}
{{ state_attr('sensor.rest_gw2000_xs','values')[0][1] }}
{{ state_attr('sensor.rest_gw2000_xs','values')[1][0] }}
{{ state_attr('sensor.rest_gw2000_xs','values')[1][1] }}

The output is:

2015-01-01T00:00:00Z
0
2015-01-02T00:00:00Z
0

Faecon · April 4, 2023, 8:02am

afbeelding

how do I get rid of the chart after “now” ?

Want I want to see is a chart from 00:00 to now…

boheme61 · April 4, 2023, 8:58am

extend_to: now

Faecon · April 4, 2023, 9:03am

thanks. I see it was even in the docs

Lunkobelix · April 4, 2023, 9:52am

Finally gave config-template-card a shot but I’m (of course) failing
I installed it via HACS and even restarted and below is my code. Do you see anything obvious that I’m missing?

type: custom:config-template-card
entities:
  - sensor.mrg_wind_speed_max
card:
  type: custom:apexcharts-card
  header:
    title: ''
    show: false
    show_states: true
  graph_span: 24h
  update_interval: 1min
  apex_config:
    now:
      show: true
      label: ${'Current Temp.' + states['sensor.mrg_wind_speed_max'].state + ' m/s'}
    title:
      text: Vind
      align: left
      margin: 0
      offsetX: 0
      offsetY: 10
      floating: false
      style:
        fontSize: 15px
        fontWeight: 200
        fontFamily: Segoe UI Light
        color: '#FFFFFF'
    tooltip:
      enabled: false
      x:
        format: dd MMM
    xaxis:
      tooltip:
        enabled: false
      axisBorder:
        show: false
      labels:
        style:
          colors: white
          fontSize: 9px
          fontFamily: Arial
    chart:
      height: 225
    grid:
      show: true
      borderColor: rgba(220, 220, 220, 0.1)
      strokeDashArray: 4
      position: back
    legend:
      show: false
    plotOptions:
      bar:
        borderRadius: 2
  yaxis:
    - min: 0
      max: ~3
      apex_config:
        forceNiceScale: true
        decimalsInFloat: 0
        labels:
          style:
            colors: '#ffffff'
            fontSize: 9px
            fontFamily: Arial
  series:
    - entity: sensor.mrg_wind_speed
      name: Vind
      type: line
      stroke_width: 1
      color: 1b6d96
    - entity: sensor.mrg_wind_speed_max
      name: Vind max
      type: line
      stroke_width: 1.5
      color: 2eb9ff

Kertz1954 · April 4, 2023, 11:27am

Indentation is good.

You have “now” inside the apex_config:. Wrong !!

Lunkobelix · April 4, 2023, 12:42pm

My bad, I’m an idiot…

Another questions is if the now label can be shown just like normal datalabels? Horizontal and without the dotted line?

Instead of this:

I would like the layout of this to make it more uniform:

I’m not asking you to solve it just checking if you or someone else have made something clever I can piggy back on?

All I want to do is show a datalabel for the very last data point so that the current value is shown.

boheme61 · April 4, 2023, 1:55pm

    title:
      text: ${'Vind.' + states['sensor.mrg_wind_speed'].state + ' °C'}
      align: right

“play it as you like” template or card_mod


      {% set state = states('sensor.x_wind_speed')|float(-1) %}
      {% if state >= 6 %} red
      {% elif state >= 5 %} #FFBF00
      {% elif state >= 4 %} blue
      {% elif state >= 3%} green
      {% else %} green
      {% endif %}

Kertz1954 · April 4, 2023, 3:55pm

You cannot display the NOW option as horizontal.

It’s an HA addon to the official APC.

So remove it and add this within your apex_config.

    annotations:
      position: back
      yaxis:
        - 'y': ${states['sensor.meter_plus_6469_temperature'].state}
          strokeDashArray: 0
          label:
            text: ${states['sensor.meter_plus_6469_temperature'].state}
            borderWidth: 5
            borderRadius: 10
            offsetX: 0
            offsetY: -15
            style:
              background: '#00000'
              color: '#ffffff'
              fontSize: 16px
          borderColor: 'EVAL:(window.chart_max > 10 ? "#0000FF" : "#c2c2c2")'
          borderWidth: 0
        - 'y': 18.2
          strokeDashArray: 0
          label:
            text: You owe me a bottle of Whisky !!
            borderWidth: 5
            borderRadius: 10
            offsetX: -120
            offsetY: -15
            style:
              background: '#00000'
              color: '#ffffff'
              fontSize: 16px
          borderColor: '#ffffff'
          borderWidth: 0

Read the APC documentation / annotations for full option configurations.

Have fun !!

Lunkobelix · April 4, 2023, 4:06pm

Kertz1954:

annotations:
      position: back
      yaxis:
        - 'y': ${states['sensor.meter_plus_6469_temperature'].state}
          strokeDashArray: 0
          label:
            text: ${states['sensor.meter_plus_6469_temperature'].state}
            borderWidth: 5
            borderRadius: 10
            offsetX: 0
            offsetY: -15
            style:
              background: '#00000'
              color: '#ffffff'
              fontSize: 16px
          borderColor: 'EVAL:(window.chart_max > 10 ? "#0000FF" : "#c2c2c2")'
          borderWidth: 0
        - 'y': 18.2
          strokeDashArray: 0
          label:
            text: You owe me a bottle of Whisky !!
            borderWidth: 5
            borderRadius: 10
            offsetX: -120
            offsetY: -15
            style:
              background: '#00000'
              color: '#ffffff'
              fontSize: 16px
          borderColor: '#ffffff'
          borderWidth: 0

Wow, just wow! Thanks a million for this. Still need some work but getting there

Bobmorton-TX · April 4, 2023, 6:09pm

my first post here. I love this card and my dashboard is looking nice because of it!
I am struggling to display totals of stacked columns.
~~I have it working for another chart.~~
but for this one

totals are shown twice.

how can I show only one value for both columns?

help is much appreciated

type: custom:apexcharts-card
now:
  show: true
header:
  show: true
  title: Heute
apex_config:
  legend:
    show: false
  chart:
    height: 150px
  plotOptions:
    bar:
      columnWidth: 100%
  dataLabels:
    offsetY: -10
    background:
      enabled: true
      borderColor: '#fff'
      borderWidth: 0
      borderRadius: 0
      opacity: 0.8
      foreColor: '#000'
stacked: true
span:
  end: day
all_series_config:
  show:
    datalabels: total
graph_span: 4d
series:
  - entity: sensor.save_sumDelta_mqtt_0_inverter_Tsun400_ch0_YieldTotal_hour
    type: column
    offset: +0h
    show:
      legend_value: true
      extremas: false
    group_by:
      duration: 24h
      fill: last
      func: sum
  - entity: sensor.save_sumDelta_mqtt_0_inverter_HM300_ch0_YieldTotal_15Min
    type: column
    offset: +0h
    show:
      legend_value: true
    group_by:
      duration: 24h
      fill: last
      func: sum

Lunkobelix · April 4, 2023, 6:54pm

Me again…

Related to config-template-card… Is anything of the following possible?

Show a label only over the current hour in a column chart similar to my picture below? @Kertz1954, your sample code did it for the yaxis but with both xaxis AND yaxis I’m stuck.
Highlight the current hour in a column chart like below in a different color.

I have managed the two above but the code isn’t pretty so if it is possible in a better way it would open up to do things that are currently broken because of my not so good looking code.

Lunkobelix · April 4, 2023, 8:20pm

Showing markers makes the line graph look pretty nice but I prefer to only have a marker at the very last datapoint. Problem is that there isn’t a fixed amount of datapoints in a line graph. Changes over time and depends on the device.

Has anyone found a way to retrieve the number of datapoints so that value can be used to only show a marker for the very last datapoint?

dataPointIndex is what needs to be updated dynamically.

  apex_config:
    markers:
      size: 0
      colors: '#0000ff'
      discrete:
        - seriesIndex: 0
          dataPointIndex: 62
          fillColor: orange
          strokeColor: '#ffffff'
          size: 5

Edit:
Feels like I’m close thanks to some code in this thread but doesn’t take me all the way:

  apex_config:
    markers:
      size: 0
      colors: '#0000ff'
      discrete:
        - seriesIndex: 0
          formatter: |
            EVAL:function(value, { series, seriesIndex, dataPointIndex, w }) {
              if(dataPointIndex > 55)
                return 'dataPointIndex: ' + dataPointIndex
              }
          fillColor: orange
          strokeColor: '#ffffff'
          size: 5

Lunkobelix · April 6, 2023, 10:15am

Did you ever find a way to get the last dataPointIndex for markers? In my chart it varies over time from around 55-65 and I would like to get the last dataPointIndex in order to show a marker for that one only (se my post above).

uowis · April 6, 2023, 1:38pm

png)
I have group_by hour with devices consomation, so the bar mean the consomation between two hour.
So ,… is there somebody who know the solution to move the column between the hour ?

Lunkobelix · April 6, 2023, 2:10pm

Maybe try this?

series:
  - entity: sensor.to_be_moved
    time_delta: -30m

uowis · April 6, 2023, 2:34pm

It’s a solution but it must found a solution for this :

It’s shoudl be better with the real interval but it’s perahps too much for this card.