ahh ok, yeah it was the “transition” from/to today/tomorrow i was interested in ;), i made a “double” 2-sensor-entries, and first it seems ok, but still abit problems getting it as i want
Hi there,
Anyone knows hot to make a line graph with a dashed line? strokeDashArray seems to work only in annotations, or am i doing something wrong?
Thanks.
Pedro.
Hi,
I’d like to plot my solar output of the day. However, when I use span → start:day, it shows the whole day, including the rest of the day that has not happened yet. How do I make it dynamically plot 00.00 until now?
Can Apex Charts display a sensor’s value in the header if said value is Text and not numerical?
Here’s an example that I use for 3 series.
Only the last series has a broken line.
apex_config:
stroke:
show: true
curve: smooth
colors:
- '#ADD8E6'
- '#0096FF'
- '#FFFF00'
width: 2
dashArray:
- 0
- 0
- 2
2 Likes
By reading the documentaion for the series Options. 
I’ve done that, but extend_to: now just shows the data up until now, but the x-axis itself still runs to tonight 00.00. I can not find how to have that up til now. This is my file:
type: custom:apexcharts-card
header:
show: true
title: Zonnepanelen
show_states: true
colorize_states: true
span:
start: day
yaxis:
- id: total
decimals: 1
opposite: false
apex_config:
tickAmount: 6
forceNiceScale: true
labels:
show: true
- id: current
decimals: 0
opposite: true
apex_config:
tickAmount: 6
forceNiceScale: true
labels:
show: true
series:
- entity: sensor.zpc0825344_energy_today
stroke_width: 2
yaxis_id: total
name: Vandaag
extend_to: now
- entity: sensor.zpc0825344_output_power
stroke_width: 1
yaxis_id: current
name: Huidige opbrengst
extend_to: now
How can I control which series is shown in the tooltip? There must be an easy way that I’m missing?
I only want to show one of the two series in the tooltip.
Edit:
Found it:
apex_config:
tooltip:
enabledOnSeries:
- 0
- 1
1 Like
That’s because the default value for graph_span is 24h.
If you added this option and changed it to read your current hour time, you would get what you are looking for.
However this can be automated by creating a sensor that just reports the current hour. Then importing this sensor by using the custom:config-template-card. There is one posting in this thread that shows how this is done.
Then usings the following will display the result you are looking for.
graph_span: ${{states['your new sensor'].state+'h'}}
span:
end: minute
Thank you! I will look into this, sounds a bit more complicated than I hoped but I should be able to make it. Just to check, I would have to make a sensor that just fills with the total energy generated in the current hour, as a sum? Or the current power over the past hour (so a kWh sensor or kW sensor?). And should this be from the last 60 minutes or the current hour? e.g. should it, as this moment show 12.07 - 13.07 or 13.00 - 13.07?
The sensor you create should show just the hour as now 13
Thanks, so 13.00 - now, and after 14.00 it will reset itself. And should it be the kWh or kW sensor? So the current usage or sum of usage of the hour?
Please do not add further questions to the one you initially raised which was how to display to current hour. Help your self and change your code to
graph_span: nh
span:
end: minute
and then sort out your other questions.
I’m trying, but graph_span: nh does not seem to be valid.
EDIT: I understand that n is a variable that I should change now ;). Thanks. This works!
1 Like
I have made this chart, but i think the columns is aligned to far to the left. Any ideas how i can align them to te center?
Share your code, instead of ( or with ) the pic, then people can try to “elaborate” from there , to figure it out
I.E in my latest “tests” i didn’t find the columns aligned to the left (out of the box) , thou depending upon the amount of columns, and the text (labels) below, you can end up with something that doesn’t look aligned
EDIT: it seems like it’s your stroke_width on the column that makes it look like that 
Here is the code. When i change the stroke_width it isn’t directly to the left, but really far left
type: custom:apexcharts-card
header:
title: ' '
show: true
show_states: true
colorize_states: true
graph_span: 10d
span:
start: day
offset: '-9d'
apex_config:
legend:
show: false
dataLabels:
enabled: false
series:
- entity: sensor.elpris_idag
type: column
color: '#03a9f4'
group_by:
func: max
duration: 1day
name: Idag
extend_to: false
stroke_width: 12
- entity: sensor.snittpris_denna_manad
type: line
name: Snittpris
stroke_width: 5
fill_raw: last
curve: smooth
color: lightblue
I had my first go at setting up an ApexChart today. But it completely bogged down my Home Assistant and I only just managed to delete it and get control back.
It was scary how it made my HA almost unusable.
This is the chart I had created (still learning about how to best set up):
type: custom:apexcharts-card
header:
show: true
title: Hot Water Power Diversion
show_states: true
colorize_states: true
graph_span: 2d
span:
start: day
offset: '-1d'
series:
- entity: sensor.power_photovoltaics_fronius_power_flow_0_http_192_168_0_201
transform: "return x / 3;"
type: column
opacity: 0.8
color: rgb(250, 250, 0)
- entity: sensor.power_hot_water_split_aircon
type: column
color: rgb(250,100,0)
opacity: 1
yaxis:
- min: 0
max: 3000
Any clues on what I’m doing wrong or how to make it not completely bog HA down?
Thanks!
Not sure but maybe try reducing the span to 6 hours vice two days?