Just looking at the code and image that you posted.
Definitely an issue with your post.
No need to alterate the generator, just change graph span:
card:
type: custom:apexcharts-card
graph_span: 24h
span:
start: day
offset: +0H
Best, JR
Correct, but the reason I would need to change the generator is that I need extrema on a per-day basis. Do achieve this, I would split the data-generator in 2 series
series:
- entity: sensor.epex_spot_be_price
show:
extremas: true
data_generator: >
return only today
- entity: sensor.epex_spot_be_price
show:
extremas: true
data_generator: >
return only tomorrow
That is why I have 2 cards, for tomorrow it is conditional card showing only when tomorrow prices are available 
And using Nordpool integration I have anyway different tags (today/tomorrow) in attributes…
Best, JR
Done:
type: custom:apexcharts-card
header:
show: false
graph_span: 48h
span:
start: day
now:
show: true
label: Now
color_list:
- var(--primary-color)
series:
- entity: sensor.epex_spot_be_price
yaxis_id: uurprijs
float_precision: 2
type: line
curve: stepline
extend_to: false
show:
extremas: true
data_generator: >
return entity.attributes.data.map((entry, index) => { return [new
Date(entry.start_time).getTime(), ((0.2040 + 0.1 *
entry.price_eur_per_mwh) * 1.06 / 100 ) + (2.241 + 4.98204 + 0.20417 +
4.513) / 100]; }).slice(0,24);
color_threshold:
- value: 0
color: '#186ddc'
- value: 0.155
color: '#04822e'
- value: 0.2
color: '#12A141'
- value: 0.25
color: '#79B92C'
- value: 0.3
color: '#C4D81D'
- value: 0.35
color: '#F3DC0C'
- value: 0.4
color: red
- value: 0.5
color: magenta
- entity: sensor.epex_spot_be_price
yaxis_id: uurprijs
float_precision: 2
type: line
curve: stepline
extend_to: end
show:
extremas: true
data_generator: >
return entity.attributes.data.map((entry, index) => { return [new
Date(entry.start_time).getTime(), ((0.2040 + 0.1 *
entry.price_eur_per_mwh) * 1.06 / 100 ) + (2.241 + 4.98204 + 0.20417 +
4.513) / 100]; }).slice(23,47);
color_threshold:
- value: 0
color: '#186ddc'
- value: 0.155
color: '#04822e'
- value: 0.2
color: '#12A141'
- value: 0.25
color: '#79B92C'
- value: 0.3
color: '#C4D81D'
- value: 0.35
color: '#F3DC0C'
- value: 0.4
color: red
- value: 0.5
color: magenta
experimental:
color_threshold: true
yaxis:
- id: uurprijs
min: 0.1
max: 0.5
decimals: 2
apex_config:
title:
text: €/kWh
tickAmount: 4
apex_config:
legend:
show: false
tooltip:
x:
show: true
format: HH:00 - HH:59
Haha point taken.
I am trying to make a stacked barchart where the left side images stack on tope of each other. But if you look when I enable both they seem to be in front/behind each other instead. Below is my image an code. I’m curious if anyone else has seen this behavior or if something in my config is causing it?
- type: "custom:apexcharts-card"
yaxis:
- id: a
- id: b
opposite: true
stacked: true
header:
title: Downstairs HVAC
show: true
show_states: false
series:
- entity: sensor.yearly_downstairs_ac
yaxis_id: a
color: LightSkyBlue
data_generator: |
let res = [];
for (const [key, value] of Object.entries(entity.attributes)) {
let d = new Date(key).getTime();
if (d > 0)
res.push([d, value]);
}
return res.sort((a, b) => { return a[0] - b[0] });
type: column
- entity: sensor.yearly_downstairs_heat
yaxis_id: a
color: LightCoral
data_generator: |
let res = [];
for (const [key, value] of Object.entries(entity.attributes)) {
let d = new Date(key).getTime();
if (d > 0)
res.push([d, value]);
}
return res.sort((a, b) => { return a[0] - b[0] });
type: column
- entity: sensor.yearly_temps
yaxis_id: b
color: LightGray
data_generator: |
let res = [];
for (const [key, value] of Object.entries(entity.attributes)) {
let d = new Date(key).getTime();
if (d > 0)
res.push([d, value]);
}
return res.sort((a, b) => { return a[0] - b[0] });
type: line
graph_span: 30days
apex_config:
bar:
columnwidth: 100%
all_series_config:
stroke_width: 2
Hi,
this might be a bit silly of a question,
but is it possible to make a chart that just shows a horizontal percentage bar?
a bit like the custom bar chart addon (but that hasn’t been updated for 3 years)
PS: thou even if the bar-card is not “maintained” it still works well, and there is an active Topic for the card.
There is an issue raised.
Stacked not working as expected with multiple axis #166
I suggest you read the issue in full and experiment.
Thanks, that is unfortunate, sounds like it can’t really be fixed. I may try the plotly card, but I think this one looks a bit more visually polished from the get go.
Never give up until you have exhausted all avenues.
47 years as a programmer, tester and trouble shooter, I eventually resolve a problem.
Here are some code snippets of a test I created using stacked with 2 yaxis.
yaxis:
- id: dummy
min: 0
max: 50
show: true
apex_config:
forceNiceScale: 'yes'
labels:
show: true
- id: dummy1
opposite: true
min: 0
max: 30
show: true
apex_config:
forceNiceScale: 'yes'
labels:
show: true
series:
- entity: sensor.meter_plus_6469_temperature
type: column
yaxis_id: dummy
- entity: sensor.meter_plus_2e7b_temperature
type: column
yaxis_id: dummy
- entity: sensor.meter_plus_2e7b_temperature
type: line
yaxis_id: dummy1
Ensure you have referenced the yaxis id’s correctly for all your series.
Ensure that your 2 column series have the same unit of measurement within HA.
If it still does not work after this, the only difference is that you are using the data generator option.
2 Likes
Hello, is there a way to make only one of the series solid and the other stroke?
Also, I need to make the outer radial bar’s track gradiently transparent.
Here is what I want to achieve:
This is what it looks like right now:
Yaml:
- type: vertical-stack
view_layout:
grid-area: col3
cards:
- type: custom:apexcharts-card
style: |
ha-card {
padding-top: 4em;
background: transparent;
}
chart_type: radialBar
series:
- entity: sensor.solaredge_current_power
name: Production
color: '#FF9500'
- entity: sensor.solaredge_current_power
name: Consumption
color: '#FF9500'
header:
show: false
show_states: false
floating: true
title: Power
colorize_states: true
apex_config:
chart:
height: 450px
width: 400px
legend:
onItemHover:
highlightDataSeries: false
show: false
plotOptions:
radialBar:
startAngle: -180 #-20
endAngle: 180 #-30
dataLabels:
name:
show: true
offsetY: 55
value:
show: true
offsetY: 5
fontSize: 50px
fontWeight: 200
color: '#FFFFFF'
total:
show: true
fontSize: 21px
fontWeight: 500
label: Solar
color: '#545454'
formatter: |
EVAL:(w) => {
return w.globals.seriesTotals + ' kWh';
}
hollow:
size: 65%
image: undefined
imageOffsetX: 0
imageOffsetY: 0
position: front
dropShadow:
enabled: true
blur: 10
opacity: 0.24
track:
show: true
background: rgba(60, 60, 60, 0.8)
strokeWidth: 150%
dropShadow:
enabled: true
blur: 10
opacity: 0.35
# fill:
type: gradient
gradient:
shade: dark
type: horizontal
shadeIntensity: 0.5
gradientToColors: '#ABE5A1'
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 100
stroke:
dashArray: 4
lineCap: flat
dashArray: Number || Array of Numbers
Try this.
dashArray:
- number
- number
1st number = 1st series, etc.
For the outer radial bar’s track gradiently transparent question.
Again, an Array applies.
fill: {
type: ['solid', 'gradient']
}
Recheck the APC documentation again 
1 Like
fill: {
type: ['solid', 'gradient']
}
This worked but differentiating two dashArray didn’t (gave me an error) so I just manipulated the path’s CSS like this:
- type: custom:apexcharts-card
style: |
#SvgjsPath1134 {
stroke-dasharray: 4 !important;
}
Result:
1 Like
Stills truggeling on how to get a a marker on hte very last datapoint. Need to find the last dataPointIndex to replace the “62” in my code below. No one that has run into the same problem before?
apex_config:
markers:
size: 0
colors: '#0000ff'
discrete:
- seriesIndex: 0
dataPointIndex: 62
fillColor: orange
strokeColor: '#ffffff'
size: 5
1 Like
Have you tried doing a browser search ?
Try this including the double quotes.
"apexcharts display marker only on the very last datapoint"
You will find the answer that you are NOT looking for, if you catch my drift.
Then you can move on to your next project !! 
Not sure what you are trying to say? I have googled like crazy and haven’t found a native way but adding the dataPointIndexes in an array and picking the highest one should be doable, that’s why i asked if anyone had a tried something clever.
But I’ll look into something other impossible to focus on, I have quite a list of cool (and impossible) things to spend time on 
Hi
is it possible to control the order of drawing of the series?
I have an area and column chart on one plot with two axes and would like the columns to be behind. Whatever order I define the series, the columns are always on top.
I believe the same goes for “line” series, they are also on top of “area” … for very obvious reasons
EDIT: fixed… I feel dumb
startAngle: -20
endAngle: 310
Uh… why are startAngle and endAngle affecting the max value of the series?
I want the radialBar to show 0% (0 kWh) to start at startAngle: -20 and 100% (50 kWh) at endAngle: -50
(1% is 1kWh in radialBar for some reason)
But instead, it’s interpreting the endAngle as 310%, thus, making 49.3 kWh that small instead of making an almost-full circle.
Can you make startAngle and endAngle only asthetic so that they don’t affect the min and max of the series?
...
chart_type: radialBar
series:
- entity: sensor.solaredge_energy_today
min: 0
max: 50
unit: kWh
name: " "
color: '#FFE296'
- entity: sensor.solaredge_energy_today
min: 0
max: 50
unit: kWh
name: Today
color: '#FFC326'
...
plotOptions:
radialBar:
startAngle: -20
endAngle: -50
dataLabels:
name:
show: true
offsetY: 55
...