Don’t know, if this is possible with Apex, but you do know, that there is a standard card for this? 
Thanks for your answere.For sure with the history graph card it is possible:
But scaling of the different x-axis do not really fit together.
1 Like
Hi!
Can you help me how to align the header to the center (I tried but it doesn’t worked).
And if it is possible, how to
- hide the row marked with 3 on the picture
- maybe align to the right row 2
- and mark a windows sensor opened/closed state with a vertical line.
Thanks!
Hi!
I want to use a template in the title of a chart, but it doesn´t work.
Is this somehow possible or does anyone have any other ideas?
Best regards,
Michael
Hello – Something happened to column charts with color_thresholds when upgrading from version 2.0.4 to 2.1.0 or above. Each column now has a fixed gray border messing up the intended look:
v2.0.4:
v2.1.x:
The problem is even worse on more dense charts as the border color completely overlaps the desired fill color. I tried to find a config for getting rid of the borders without luck – Any advice, please?
The code for this example:
- type: "custom:apexcharts-card"
graph_span: 1 days
header:
show_states: false
colorize_states: true
span:
start: day
offset: -1day
experimental:
color_threshold: true
series:
- entity: sensor.nordpool_kwh_fi_eur_3_10_024
transform: "return x * 100"
name: foo
yaxis_id: foo
stroke_width: 4
opacity: 0.8
type: column
unit: "snt/kWh"
time_delta: +1h
group_by:
func: avg
duration: 60min # sample size
color_threshold:
- value: -1
color: 00A000 #green
- value: 8
color: 1E90FF #blue
- value: 16
color: DAA520 #yellow
- value: 24
color: FF0000 #red
apex_config:
yaxis:
- id: foo
min: 0
max: 60
decimalsInFloat: 0
show: true
legend:
show: false
tooltip:
enabled: false
Does anyone know how I can show the header only without the graph? I like the way it shows the temperatures in the different rooms in the header and I can also display the equivalent temperature from 24hrs ago.
Thanks.
Care to explain as this is an odd question for a GRAPH card?
Hi all,
Since an update done a month ago (running now on v2.1.2), my color_threshold that have worked fine for more than a year all look grey.
I didn’t find any breaking change in the update info, did I miss something?
my code:
type: custom:apexcharts-card
apex_config:
chart:
height: 140
stroke:
width: 12
curve: straight
legend:
show: false
yaxis:
decimals: 2
tickAmount: 4
graph_span: 10h
update_interval: 3m
span:
end: hour
experimental:
color_threshold: true
series:
- entity: sensor.electricity_consumption_15_minutes_net_consumption
transform: return x * 4;
type: column
group_by:
func: last
duration: 15m
color_threshold:
- value: -10
color: SteelBlue
- value: -3
color: CadetBlue
- value: -1
color: LightBlue
- value: 0
color: 99ff99
- value: 1
color: ffce00
- value: 2
color: ff9a00
- value: 3
color: ff5a00
- value: 4
color: ff0000
- value: 5
color: a70000
A quick question
How can I limit (cap) the entry.pv_estimate to 5? So within the data generator, if entry.pv_estimate > 5, entry.pv_estimate = 5?
series:
- entity: sensor.solcast_pv_forecast_forecast_today
name: Forecast
color: Grey
opacity: 0.3
stroke_width: 0
type: area
extend_to: false
yaxis_id: kWh
show:
legend_value: false
in_header: false
data_generator: |
return entity.attributes.detailedForecast.map((entry) => {
return [new Date(entry.period_start), entry.pv_estimate];
});
Try something like this, I may have made a typo (cannot verify this 100%)
let res = [];
entity.attributes.detailedForecast.map((entry) => {
if (entry.pv_estimate > 5) {
res.push ([new Date(entry.period_start), entry.pv_estimate])
};
else {
res.push ([new Date(entry.period_start), 5])
};
});
return res;Hi everyone,
I am trying to plot a binary_sensor that is currently tracking if 8.8.8.8 can be pinged.
But the plot is extreeeeeeemly slow. On my mobile it won’t even show anything. On my PC is shows the plot after a while.
Given that there are very few data points to this binary_sensor, I was wondering if anybody knows why it is so slow?
type: custom:apexcharts-card
view_layout:
grid-area: card01
series:
- entity: binary_sensor.8_8_8_8
transform: 'return x === ''on'' ? 1 : 0;'
yaxis_id: first
color: orange
show:
in_chart: true
in_brush: true
header:
show: true
show_states: true
colorize_states: true
yaxis:
- id: first
show: true
min: 0
max: 2
decimals: 0
apex_config:
tickAmount: 2
apex_config:
markers:
size: 1
strokeWidth: 1
fillOpacity: 1
colors: '####'
legend:
show: false
grid:
show: false
position: front
xaxis:
lines:
show: true
yaxis:
lines:
show: true
borderColor: darkgrey
strokeDashArray: 1
row:
colors:
- transparent
- transparent
opacity: 0.1
dropShadow:
enabled: true
color: green
top: 18
left: 7
blur: 100
opacity: 0.5
dataLabels:
enabled: true
all_series_config:
stroke_width: 1
group_by:
func: raw
type: area
opacity: 0.1
curve: stepline
fill_raw: last
show:
extremas: true
datalabels: false
experimental:
brush: true
brush:
selection_span: 2.0d
graph_span: 30.0d
span:
offset: ''
I am using all of these settings on a different plot without the transform, and there is works without any issues. And that one actually has far more data points.
Thank you… no error, but chart not displaying at all with this. Any thoughts?
data_generator: |
let res = [];
entity.attributes.detailedForecast.map((entry) => {
if (entry.pv_estimate < 5) {
res.push ([new Date(entry.period_start), entry.pv_estimate])
};
else {
res.push ([new Date(entry.period_start), 5])
};
});
return res;
No clue … this is what it shows with me
type: custom:apexcharts-card
header:
title: Compare forecast@6 with rolling forecast
show: true
graph_span: 1d
span:
start: day
apex_config:
legend:
floating: true
position: top
now:
show: true
series:
- entity: sensor.weather_forecast_hourly_openweathermap
name: forecast(rolling)
color: green
extend_to: false
data_generator: |
let res = [];
entity.attributes.forecast.map((entry) => {
if (entry.temperature > 26) {
res.push([new Date(entry.datetime), entry.temperature]);}
else { res.push([new Date(entry.datetime), 5]) }
})
return resVery interesting… there must be some subtle difference in the forecast data… I am sure you have given me the solution - I just need to figure out why it is not quite doing its thing!
So this works (it uses two return statements):
data_generator: |
return entity.attributes.detailedForecast.map((entry) => {
return [new Date(entry.period_start), entry.pv_estimate];
});
And this does not work
data_generator: |
res = [];
entity.attributes.detailedForecast.map((entry) => {
res.push ([new Date(entry.period_start), entry.pv_estimate])
});
return res;
This is essentially the same problem I’m experiencing, see: ApexCharts card - A highly customizable graph card - #3652 by hkapanen
Hi Andrew, how did you configure the donut chart with the temperature lines (server health)? Do you mind to show the config you used? I can’t seem to get it done 
Hi !
I’ve to delete and recreate a device within an integration.
But, the name of the entities change : the first ones have english names, and now it’s french names.
So, the graph forget all the past values.
Is there a way to mix the 2 entities on one graph line ?
Thanks.