ApexCharts card - A highly customizable graph card

[sirpreis]

Is it possible to have the states on top show the current/last value of a series, but the series itself be grouped? I have my solar produktion and consumption as two series, but want to “flatten” the curves (grouping by 5 min), but I want the current solar produktion and current house consumption to be shown on top.

Edit: I think I found it myself. in_header: raw will use the raw data, not the grouped data, inside the header.

I was using transform functionality to change Watts to kW inside the series. Howeve, when using in_header: raw it would not transform and display W instead of kW in the header. I had to create a template sensor for that and remove the transform function from the series.

[Stevengerrard08]

Is it possible to hide this?

[boheme61]

yes ofcause

[Lunkobelix]

For some reason, the y axis labels are shown with font Times New Roman (or similar) while other text in my dashboards are shown correctly with Segoe UI Light. This is only an Issue on my iPad. Most often when something isn’t working it’s because I messed something up, can you see what is wrong here?

apex_config:
  yaxis:
    - id: Effekt
      max: 2000
      forceNiceScale: true
      decimalsInFloat: 0
      opposite: false
      show: false
      labels:
        style:
          fontSize: 10px
          fontFamily: Segoe UI Light

[boheme61]

wrong intend: maybe

labels:
      style:
           fontSize: '12px'
           fontFamily: 'font'

Upps that looks wrong … thou style, under last labels l … font again under styles l … which seems to be 1 more slash for both , and then try with ‘font’ … meaning the smal upper dots, what ever they are called

[xelabug]

Apexcharts question: scale y axis based on brush selection

I am attaching some screenshots, as per my previous post: … is it a bug to report or is it a problem with my code? [Screenshot 2023-03-07 170527] [Screenshot 2023-03-07 170716] [Screenshot 2023-03-07 170654] My code of latest screenshot: type: custom:apexcharts-card graph_span: 7d experimental: brush: true brush: selection_span: 2d span: end: day apex_config: chart: height: 400px zoom: enabled: true brush: autoScaleYaxis: true toolbar: show: true …

Thank you for Support!

[Lunkobelix]

That didn’t help unfortunately. But changing the font size works on my iPad so the label style is used but for some reason not the font family. I then thought it is because Segoe UI Light isn’t available on my iPad but it works in a markdown card.

[vandermark (Bart van der Mark)]

Can I use the 'forceNiceScale: true' argument?

Options (Reference) > yaxis – ApexCharts.js

[Kertz1954]

You can use around 99% of all options(referenced) in the APC documentation.

[jurasjo (Juras)]

Hi,
so the data (green on the screenshot can be 0 or 1) and in the upper right corner the value is displayed.
Is it possible to change what is shown from for example: “0” to “No” and “1” to “Yes” ?

A piece of card config:

[Artjom]

Hi,
I have two issues with my line in the chart when I add an additional column chart:

1. there is a part missing in the line when the value has no change.
2. color_threshold does not work anymore

the code:

      - type: custom:config-template-card
        entities:
          - sensor.gas_meter_daily
        card:
          type: custom:apexcharts-card
          experimental:
            color_threshold: true
          graph_span: 24h
          span:
            start: day
          update_interval: 5min
          header:
            title: ${{"TodayTest  = " + states['sensor.gas_meter_daily'].state + " kWh"}}
            show: true
          apex_config:
            chart:
              height: 200px
            legend:
              show: false
            plotOptions:
              bar:
                columnWidth: 100%
            grid:
              show: true
              borderColor: '#404040'
              strokeDashArray: 4
              position: back
            xaxis:
              labels:
                format: HH:mm
                show: true
                showAlways: true
          all_series_config:
            extend_to: now
            float_precision: 1
          yaxis:
            - id: column
              decimals: 1
              min: 0
              max: '|+1|'
              apex_config:
                tickAmount: 7
            - id: line
              opposite: true
              decimals: 1
              min: 0
              max: '|+2|'
              apex_config:
                tickAmount: 7
          series:
            - entity: sensor.gas_meter_hourly
              yaxis_id: column
              type: column
              show:
                extremas: true
                in_header: false
              group_by:
                func: max
                duration: 1h
              color_threshold:
                - value: 0
                  color: '#90ee90'
                - value: 2.5
                  color: '#ffe058'
                - value: 4
                  color: '#ff6358'
            - entity: sensor.gas_meter_daily
              yaxis_id: line
              type: line
              curve: smooth
              stroke_width: 3
              fill_raw: last
              group_by:
                func: max
                duration: 1h
              color_threshold:
                - value: 5
                  color: '#43a047'
                - value: 20
                  color: '#ffa600'
                - value: 30
                  color: orange
                - value: 50
                  color: red

in the code yaxis id updated for better understanding

just line chart (the part with “- entity: sensor.gas_meter_hourly” is removed) works fine

[boheme61]

@Artjom

   - entity: sensor.gas_meter_daily
              yaxis_id: second
              curve: smooth
              fill_raw: last
              group_by:
                func: max
                duration: 1h
              color_threshold:
                - value: 5
                  color: '#43a047'
                - value: 20
                  color: '#ffa600'
                - value: 30
                  color: orange
                - value: 50
                  color: red

and this serie is “type ?”

[netroize (Mårten Sörliden)]

Hi!
I have seen a bug in the line apexcharts-card. I have a diagram that measures my electricity costs. When my solar panels produce enough electricity this diagram get stuck on a minimum value for a while. But the diagram visualize this period as a spline from the minimum value at the beginning of the period to the top of the next higher value. When I hover on the diagram I can see that it just has a starting point and an end point in the spline.
This happen for instance when I turn on something in the kitchen in the afternoon.
So in this diagram there should have been a horizontal line along the red line and a spike at the end of the red line to show the correct values.

type: custom:apexcharts-card
update_interval: 15min
header:
  show: true
  title: Elkostnad
  show_states: true
  colorize_states: true
all_series_config:
  stroke_width: 1
  opacity: 1
graph_span: 1d
span:
  offset: '-1h'
series:
  - entity: sensor.momentary_cost
    type: line
    show:
      extremas: true

[Artjom]

@boheme61

and this serie is “type ?”

this is the type: line, but it works without definition

[boheme61]

ok, go your own way
regardless read about “line” then you find your answer to “fill” the gap

[Kertz1954]

I don’t see any of these in your graph.

Are you sure it’s a bug ?

Have you tried using the history graph card as a comparison to confirm it’s a bug ?

An image posted side by side would help prove your bug theory.

[hjatsu (hjatsuu)]

In recent days I’ve started to notice strange instability in HA 2023.3.1 lovelace. For instance, adding some card to an existing grid card seems to crash the page (Mobile Safari on iOS gives error that page has had recurring issues) and now that I tested with PC Chrome I can indeed see lots of errors, and they seem to be linked to ApexCharts-Card only – even though the page in question does not have any Apex Charts.

Also, scrolling a page (also not having any Apex Charts) that has a weather-radar-card sometimes, but not always, crashes the iOS browser too when that card appears on screen, and only when that card is scrolled to view. Accessing that page on Chrome seems to introduce a few Apex errors too but only a few, compared to the flood of errors on the other page.

See browser logs linked below.

(FWIW, based on recent custom card additions, I think these errors could be linked to two cards I added through HACS, ha-energy-overview-card & lovelace-collapsable-cards but I have not tested yet if the apex errors disappear if I remove those. In general, can some cards mess up other cards?)
→ after removing the recent custom cards, the answer seems to be No.

Home Assistant, Chrome console logs - Pastebin.com

[hjatsu (hjatsuu)]

An update to this issue: The errors seem to pop in the browser console regardless go the cards I had added lately – tried uninstalling them but the issues persist. Even deleted a bunch on old unused apexcharts-cards from old views I had stored, no help.

The same errors appear in the log every time I try and add any card to any view and apparently these are enough to cause Mobile Safari (in companion app) to give up and reload the page.

Logs from macOS Safari (HA 2023.3.3):

[Error] Error: Invalid value for <svg> attribute height="NaN"
	value (apexcharts-card.js:1:187074)
	value (apexcharts-card.js:1:538201)
	value (apexcharts-card.js:1:534493)
	value (apexcharts-card.js:1:640199)
	(unknown function) (apexcharts-card.js:1:646245)
	Promise
	value (apexcharts-card.js:1:646178)
	(unknown function) (apexcharts-card.js:1:649907)
[Error] Error: Invalid value for <foreignObject> attribute height="NaN"
	value (apexcharts-card.js:1:381752)
	value (apexcharts-card.js:1:385841)
	value (apexcharts-card.js:1:640808)
	(unknown function) (apexcharts-card.js:1:646245)
	Promise
	value (apexcharts-card.js:1:646178)
	(unknown function) (apexcharts-card.js:1:649907)
[Error] Error: Problem parsing d="M 0 NaN"
	attr (apexcharts-card.js:1:568741)
	value (apexcharts-card.js:1:177278)
	value (apexcharts-card.js:1:178847)
	value (apexcharts-card.js:1:259522)
	value (apexcharts-card.js:1:258551)
	value (apexcharts-card.js:1:536390)
	value (apexcharts-card.js:1:641224)
	(unknown function) (apexcharts-card.js:1:646245)
	Promise
	value (apexcharts-card.js:1:646178)
	(unknown function) (apexcharts-card.js:1:649907)
[Error] Error: Problem parsing d="M 0 NaN"
	attr (apexcharts-card.js:1:568741)
	value (apexcharts-card.js:1:177278)
	value (apexcharts-card.js:1:178847)
	value (apexcharts-card.js:1:514372)
	value (apexcharts-card.js:1:510827)
	value (apexcharts-card.js:1:536441)
	value (apexcharts-card.js:1:641224)
	(unknown function) (apexcharts-card.js:1:646245)
	Promise
	value (apexcharts-card.js:1:646178)
	(unknown function) (apexcharts-card.js:1:649907)

[chrclaus]

@Kertz1954

This is a bug when using the HA yaxis method.

However you can use the original APC yaxis method which does not remove the yaxis labels when you click on the legends.

As requested, I will give you a hint, but after you have replied to my other response for your second question. It will save you time !!

Hi Kertz1954,

just today I remember your hint ybout the original APC ayxis method. I tried some configuration but i did not get it. D you have an example for me?

[Kertz1954]

Thanks for the reminder. My excuses for the late reply. Not sure now if it was a bug or not, but here is a snippet of the yaxis code that I use. You might have to remove indentation by 2 spaces if not using the custom:config-template-card. It’s the show options you need immediately after the apex_config:.

  yaxis:
    - id: schiphol
      opposite: false
      min: ${{states['input_number.graph_feel_like_min_number'].state * 1 }}
      max: ${{states['input_number.graph_feel_like_max_number'].state * 1 }}
      decimals: 1
      apex_config:
        show: true
        showAlways: true
        showForNullSeries: true
        labels:
          show: true