I created a sensor that does the opposite kmh to bft. It is possible to recreate the first graph that is has line and scatter in the same card?
No. As per the chart_type options in the HA documentation, only one type is allowed.
1 Like
I cannot figure out why the column chart value is not in-line with the y-axis value.
The right-most has value 0.19, but the y-axis is lined above 0.2.
Anyone know?
type: custom:apexcharts-card
header:
show: true
title: Today
show_states: true
colorize_states: true
graph_span: 1d
span:
start: day
all_series_config:
float_precision: 2
unit: ' m³'
series:
- entity: sensor.helper_gas_consumption
type: column
color: var(--chart-color-gas)
fill_raw: zero
group_by:
func: diff
duration: 1h
start_with_last: true
show:
in_header: false
datalabels: true
- entity: sensor.helper_gas_consumption
color: var(--chart-color-gas)
show:
in_chart: false
in_header: true
name_in_header: false
apex_config:
plotOptions:
bar:
columnWidth: 80%
yaxis:
forceNiceScale: true
decimals: 2
min: 0
max: |
EVAL: function(max) { return max }
xaxis:
tooltip: false
grid:
show: true
tooltip:
enabled: true
marker:
show: false
x:
format: HH:mm
'y':
formatter: |
EVAL:function(value) {
if (value == 0) {
return "0";
}
let text = parseFloat(value).toFixed(2);
let result = text.replace(".", ".");
return result;
}
title:
formatter: |
EVAL: function(seriesName) {
return "";
}
dataLabels:
enabled: true
formatter: |
EVAL:function(value) {
if (value <= 0.0) {
return " ";
}
return parseFloat(value).toFixed(2);
}
textAnchor: middle
dropShadow:
enabled: true
offsetY: -12
style:
fontSize: 11px
fontFamily: Helvetica
fontWeight: 0
background:
enabled: true
foreColor: '#FFFFFF'
borderWidth: 0
opacity: 0.4
Removed almost everything, and it’s the same result, not correctly in-line with the y-axis:
looks great, how did you create the sunset, solar_noon and sunset sensors
Just looking at your original code, I see you have a option “decimals: 2”. No such option in APC yaxis. Only in HA’s APC yaxis is that valid. Replace it with “decimalsInFloat: 2”.
Then as a test, change all ref. from 2 dec, to 3 dec and see if that lines up with the y-axis.
You might have to add in your " span:" option, "offset: ‘-1d’ " to see your original data as I had to do !!
2 Likes
Thanks! The span option offset: -1s does the trick. As you can see below, the column value is in-lined with the y-axis value, and I confirmed the values are the same as presented in the Energy dashboard.
But, why is this? I mean, the data comes from the P1 meter. Is this kind of workaround for ApexChart or because of the data source? And how did you find that out?
Now, I am thinking if I need to apply this to all the other charts!
It’s not a workaround. If you are using the APC yaxis format, then you need to use the options as specified in the documentation.
The default value for “decimalsInFloat:” is undefined.
Not specifiying this option will result in an incorrect yaxis being displayed.
Just out of curiosity, my P1 reports to 3 decimal places (gas en stroom).
If yours does too, why do you choose to work with only 2 decimal places ?
The issue was not caused by the decimals. I changed it to decimalsInFloat, that didn’t fix it.
The fix is the span option offset: -1s , which is something I won’t be able to figure that out. Like why 1 second offset? How did people (you) find that out? I wrote this now as list of things to try when I have issue with APC 
About 3 decimal places. I am using this P1 meter from Marcel Zuidwijk. Yes, I think my P1 can report 3 decimals, I used to have it on my charts. But, I changed all my charts to 2 decimals because I want to make it the same as the Energy dashboard. Only 2 digits are shown in the Energy dashboard. Also to align with my energy provider, Eneco. In their app, they use 2 decimals (rounded for stroom btw).
The only reason I mentioned the offset was as in my case I had almost no data pertaining to today.
I can assure you that it is not a fix. Just pure coincidence. I suggest you keep an eye on the values as the day progresses.
I also use MZ’s device. Well pleased with it.
And you reminded me why I dumped the Energy dashboard !!
1 Like
I know I can stack series, but can I place one serie behind another one?
Reason for this is that one serie is electrical prices (spot prices) and the other one is including taxes. The higer one would then end up behind and I could get the ctooltip to display spot prices and total prices.
How can I define the amount of decimals in the header value? So that in the example in the starting post, 204Mb RAM Usage shows up as 204.00 Mb RAM usage for example.
Did you solve this? Sounds like it is similar to what I’m looking for.
APC does not support Overlapping Bar Charts.
Howerver, if your looking for something similar as per the image posted below, read on.
Simple trick using CSS to overlay one chart on top of another.
You would need the Card Mod addon to achieve this and use " margin-top: -nnnpx; " in your second chart.
The ony negative point using this method is it will render your tooltip useless.
An alternative would be to use Google Sheets which does support Overlapping Bar Charts.
2 Likes
Is it possible for data_generator to use the value of another entity? In the example below I want to connect the start of the forecast with the exact end of the current temperature which is in a different entity.
data_generator: |
let res = [];
for (const [key, value] of Object.entries(entity.attributes.forecast)) {
res.push([new Date(key).getTime(), value]);
}
res.push([new Date().getTime(), DIFFERENT_ENTITY.value]);
return res.sort((a, b) => { return a[0] - b[0] })
1 Like
Thanks for you reply, you seem to have a lot of knowledge around Apex so always interesting to read. Please keep posting and sharing 
I’ll look into this and see if I can get it to work.
1 Like
Hello,
i want to use the color threshold feature.
But my graph shows (all colors at the same Time).
Have I done anything wrong?
type: custom:apexcharts-card
experimental:
color_threshold: true
graph_span: 24h
header:
show: false
series:
- entity: sensor.airthings_wave_188530_co2
stroke_width: 3
color_threshold:
- value: 0
color: green
- value: 800
color: orange
- value: 1000
color: red
- entity: sensor.airthings_wave_188530_voc
stroke_width: 3
- entity: sensor.airthings_wave_188530_radon_1_day_average
type: area
opacity: 0.2
stroke_width: 3
apex_config:
legend:
show: false
grid:
show: false
chart:
height: 200px
Set your legend to display true and then start by deselecting your last two entities. This should give you a clearer picture about your color issues. Reading the documention again will then help you.
I have found the problem. I had no data for a short period of time. Then I used fill_raw and now everything fits.
Hello together,
I have some issues to generate an apexchart from my sensors attributes data. I think, that some of you solved above exactly the things I want to do, but … there is something wrong with my solutions (or with me)
I have written a python app in AppDaemon, creating a sensor for energy price forecasts.
there is a senson called price_forecast.low_power, which have attributes for an hourly pice foracast.
I tried several vatiants of attributes in the set_state function, e.g.:
attribute = {'data': [['2023-02-20 08:00', 0.2], ['2023-02-20 09:00', 0.2], ['2023-02-20 08:00', 0.1], ['2023-02-20 10:00', 0.3]]}
or
attribute = {'period_start': ['2023-02-20 08:00', '2023-02-20 09:00', '2023-02-20 08:00', '2023-02-20 10:00'],
'price': [0.2, 0.2, 0.1, 0.3]}
I also tried with converting the time to UTC milliseconds timestamp
Data in the HA sensor is e.g.:
Attribute
period_start:
- '2023-02-19 13:30:00'
- '2023-02-19 14:00:00'
- '2023-02-19 14:30:00'
- '2023-02-19 15:00:00'
- '2023-02-19 15:30:00'
price:
- 0.33
- 0.338
- 0.344
- 0.373
- 0.379
Now I tried to add an chart by:
type: custom:apexcharts-card
graph_span: 2d
span:
start: day
series:
- entity: price_forecast.low_power
type: line
data_generator: |
return entity.attributes.data
or with:
data_generator: |
return JSON.parse(entity.attributes.data)
or:
data_generator: |
return entity.attributes.start_period.map((start, index) => {
return [new Date(start).getTime(), entity.attributes.price[index]];
});
or …
but is still does not work.
Using:
data_generator: |
return [['2023-02-20 08:00', 0.2], ['2023-02-20 09:00', 0.2], ['2023-02-20 08:00', 0.1], ['2023-02-20 10:00', 0.3]]
the graph is shown.
Can someone help me, where the fault is? Or can tell me, how I can debug and get error messages to get a hint, where the issue is?
Thank you in advance!
"start_period " in your data_generator does not match your attribute name used " period_start " !!