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 
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.
Can I use the 'forceNiceScale: true' argument?
You can use around 99% of all options(referenced) in the APC documentation.
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:
Hi,
I have two issues with my line in the chart when I add an additional column chart:
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
and this serie is “type ?”
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
this is the type: line, but it works without definition
ok, go your own way
regardless read about “line” then you find your answer to “fill” the gap
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.
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.
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)
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?
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
If i use the pan/zoom toolbar options, how can i make the graph fill data beyond what graph_span is set for?
For example, i have graph_span set to “1w”, but i would like to pan and zoom to get earlier historical data.
Does anyone know how to set the floating point precision in the total label in the center of a donut chart? Mine keeps jumping to about 10 decimals places
Hello,
I’m strugling to find a solution to my problem. It’s simly plotting a graph from decimal value and specific hour of a tomorrow.
What I want is to create a simple column graph with the decimal value on Y axis and the specific datetime on the X axis.
From what I’ve found, I have to use data_generator to pass the specific datetime instead of ,sensor-refresh-datetime".
type: custom:apexcharts-card
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
series:
- entity: sensor.d1_t
data_generator: |
return entity.attributes.dt.map((peak, index) => {
return [new Date(peak).getTime(), entity.attributes.va[index]];
});
Is there any easier or more elegant way to create it? The sensor data is result of SQL query, so I can bend it for the ApexChart sake.
Thank you for any help!
I would like to create a heatmap style chart for my Solar PV Generation comparing the generation duringnthe day over the year. Thus the X axis would be date and the Y axsis time (taken from the observation date/time) with the colour derived from the value of the sensor - possibly in 1kw ranges. However, the data_generator function can only return 2 values (x and y) whereas I need 3 values (x, y and the number used to derive the colour). Any ideas, please?