Is there a way to make the color really that color? Not influenced by other overlaping entities colors’ (e.g. when multiple areas overlap)? Making use somehow of z-index instead of combining the colors in the overlaping parts.
Hello,
I am quite new with ApexChart but this looks amazing. Just one thing that keeps annoying me. I am building a weekly graph of the current week (running week) from Monday to Sunday for energy consumption.
When running my graph I obtain the following
i.e. a graph which does not fit nicely on the x-axis. It seems all compressed to the center. Important to note, this graph was taken on Wed. evening thus the rest of the values do not exist yet.
If I run the same graph on last week with the correct offset this is a lot nicer and fills in the whole x-axis.
So there seem to be a problem when running on the current week.
My config is:
type: custom:apexcharts-card
apex_config:
chart:
stacked: true
xaxis:
show: false
border: false
labels:
format: ddd
yaxis:
decimals: 2
apex_config:
tickAmount: 4
tooltip:
x:
format: ddd
plotOptions:
bar:
borderRadius: 5
enabled: false
legend:
show: false
graph_span: 7d
span:
end: isoWeek
offset: -7d
header:
show: true
title: Coût Journalier (€)
show_states: false
colorize_states: false
series:
- entity: sensor.energy_total_usage_daily_hc
transform: return x * 0.1841;
type: column
name: Heure Creuses
color: slateblue
unit: €
group_by:
func: last
duration: 1d
fill_raw: zero
float_precision: 0
- entity: sensor.energy_total_usage_daily_hp
transform: return x * 0.147;
type: column
color: orangered
name: Heure Pleines
unit: €
group_by:
func: last
duration: 1d
fill_raw: zero
float_precision: 0
[details="Summary"]
This text will be hidden
[/details]
Thanks a lot in advance for your precious help,
Christophe
This is something I also would like to know! Looks really bad when the columns are gradient and the line gets gradient too, hard to even see the lines sometimes. Defining the gradient settings per series would be awesome.
Please let me know if you or someone else find a solution.
1 Like
This is the exact same I’m running into with my month view. You can scroll a couple of messages up and you’ll see the same issue for me.
I have two sensors that calculate the average price for electricity for today and tomorrow. And I have a 48 hour bar graph that shows the hourly prices for today and tomorrow. How can I get the average for today shown as a line on top of the first 24 hours and the average for tomorrow for the last 24 hours?
Also, is there a way to keep the ’now’ pointer in place for an hour in the middle of each bar instead of it moving smoothly?
Dear all,
Props to @RomRider for this awesome ApexCharts Card project! And to @DCSBL for helping to bring HomeWizard Energy P1 meter to Home Assistant!
I’ve been inspired by the many people trying to show HomeWizard style utility graphs in Home Assistant, including this work by @hreedijk: HomeWizard Energy (Wi-Fi P1 meter, kWh meter, Energy Socket and Water Meter) - #122 by hreedijk, amongst others!
@Mariusthvdb was asking how to replicate these graphs (How to re-create HomeWizard 3-phase graphs in (core or custom) graph card), so I also wanted to share what I have managed to do so far. It’s work in progress, with inspiration from many, please share your suggestions/forks?
Best wishes,
Menno
Screenshot HomeWizard Energy:
Screenshot Home Assistant with ApexChart cards stylized like HomeWizard Energy:
Code:
type: vertical-stack
# Electricity
type: custom:apexcharts-card
experimental:
color_threshold: true
brush: true
header:
show: true
title: Electricity
show_states: true
colorize_states: true
apex_config:
legend:
show: false
grid:
strokeDashArray: 0
borderColor: rgb(52,52,52)
xaxis:
axisBorder:
show: false
color: rgb(52,52,52)
tickAmount: 1
axisTicks:
show: false
labels:
style:
colors: rgb(128,128,128)
yaxis:
decimalsInFloat: 0
min: -2000
max: 3000
tickAmount: 5
labels:
style:
colors: rgb(128,128,128)
all_series_config:
type: area
curve: smooth
stroke_width: 2
group_by:
func: avg
duration: 5min
color_threshold:
- value: 0
opacity: 0.2
- value: 1000
opacity: 0.7
- value: -1000
opacity: 0.7
series:
- entity: sensor.p1_meter_5c2faf000fd8_active_power_l3
name: Grid
color: rgb(66,73,241)
float_precision: 0
- entity: sensor.p1_meter_5c2faf000fd8_active_power_l2
name: Solar
color: rgb(30,227,137)
float_precision: 0
# Gas
type: custom:apexcharts-card
experimental:
color_threshold: true
brush: true
header:
show: true
title: Gas
show_states: true
colorize_states: true
apex_config:
legend:
show: false
grid:
strokeDashArray: 0
borderColor: rgb(52, 52, 52)
xaxis:
axisBorder:
show: false
color: rgb(52, 52, 52)
tickAmount: 1
axisTicks:
show: false
labels:
style:
colors: rgb(128,128,128)
yaxis:
decimalsInFloat: 3
min: 0
max: 0.04
tickAmount: 4
labels:
style:
colors: rgb(128,128,128)
all_series_config:
show:
legend_value: false
type: area
curve: smooth
stroke_width: 2
group_by:
func: avg
duration: 5min
color_threshold:
- value: 0
opacity: 0.2
- value: 0.02
opacity: 0.7
series:
- entity: sensor.gas_meter_per_min
name: Gas
color: rgb(254, 0, 144)
float_precision: 3
# Water
type: custom:apexcharts-card
experimental:
color_threshold: true
brush: true
header:
show: true
title: Water
show_states: true
colorize_states: true
apex_config:
legend:
show: false
grid:
strokeDashArray: 0
borderColor: rgb(52, 52, 52)
xaxis:
axisBorder:
show: false
color: rgb(52, 52, 52)
tickAmount: 1
axisTicks:
show: false
labels:
style:
colors: rgb(128,128,128)
yaxis:
decimalsInFloat: 0
min: 0
max: 30
tickAmount: 3
labels:
style:
colors: rgb(128,128,128)
all_series_config:
show:
legend_value: false
type: area
curve: smooth
stroke_width: 2
group_by:
func: avg
duration: 5min
color_threshold:
- value: 0
opacity: 0.2
- value: 10
opacity: 0.7
series:
- entity: sensor.watermeter_3c39e72f57ca_active_water_usage
name: Water
color: rgb(30, 144, 255)
Sensor to convert “total gas” (m3) meter reading to “gas usage” (m3/min):
#Gas meter
sensor:
- platform: derivative
source: sensor.p1_meter_5c2faf000fd8_total_gas
name: gas_meter_per_min
round: 3
unit_time: min
unit: 'm³/min'
time_window: "00:01:00"
8 Likes
Hi,
I am trying to build a graph spanning over three days but the x-axis doesnt show any number except the first/last every day. What am I doing wrong? Would have liked to have at least every three hour shown on x-axis.
type: custom:apexcharts-card
header:
show: true
title: Förbrukning vs elpriser
show_states: true
colorize_states: true
now:
show: true
label: Nu
graph_span: 72h
span:
start: day
offset: '-24h'
apex_config:
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
xaxis:
labels:
format: HH
show: true
rotate: -45
rotateAlways: true
hideOverlappingLabels: false
style:
fontSize: 10
fontWeight: 10
chart:
xaxis.type: datetime
height: 300px
zoom:
enabled: false
toolbar:
show: false
tools:
zoom: false
zoomin: false
zoomout: false
pan: false
reset: true
tooltip:
fixed:
enabled: true
position: topLeft
yaxis:
- id: second
apex_config:
min: 0
max: auto
opposite: true
forceNiceScale: true
decimalsInFloat: 2
labels:
show: true
- id: first
apex_config:
min: 0
max: auto
opposite: false
forceNiceScale: true
decimalsInFloat: 0
labels:
show: true
all_series_config:
stroke_width: 4
series:
- entity: sensor.house_consumed_energy_from_grid
yaxis_id: first
name: Förbrukning / h
type: area
curve: stepline
extend_to: now
float_precision: 2
stroke_width: 2
opacity: 0.1
color: orange
show:
in_header: true
legend_value: false
group_by:
duration: 1h
start_with_last: true
func: diff
- entity: sensor.nordpool_excl_vat
yaxis_id: second
name: Pris igår
type: line
curve: stepline
extend_to: now
float_precision: 3
stroke_width: 3
opacity: 1
color: grey
show:
in_header: false
legend_value: false
- entity: sensor.nordpool_excl_vat
yaxis_id: second
name: Pris idag
type: line
curve: stepline
extend_to: now
float_precision: 3
stroke_width: 3
opacity: 1
color: cyan
show:
in_header: true
legend_value: false
data_generator: |
return entity.attributes.raw_today.map((p) => {
return [new Date(p.start), p.value];
});
- entity: sensor.nordpool_excl_vat
yaxis_id: second
name: Pris imorgon
type: line
curve: stepline
extend_to: now
float_precision: 3
stroke_width: 3
opacity: 1
color: magenta
show:
in_header: false
legend_value: false
data_generator: |
return entity.attributes.raw_tomorrow.map((p) => {
return [new Date(p.start), p.value];
});
hi @cvester , not sure if you question from 21 Jun 2021 was solved somehow satisfactory… 
did you find some solution of showing a 12 month graph?
thx. Willy
hi @fhopley , I am curious about setting the data generator to show the monthly graphs of energy production and consumption, as I can read these values from the WattRouter device with the multi-scrape integration (data from the XML source).
I saw at your graphs using also monthly values, but I guess these are always 4 weeks within the month?)
I would need just one monthly value - so the graph can maybe be fixed to categories like:
Jan, Feb, Mar, … , Dec on the X-axis, and at the Y-axis there could be the values readed from the multiscrape sensor (from the XML).
Could you plz share your code for the graph setting what you have achieved?
or - could you plz help with the code - just to show 12 months (not 12*4 values in columns?)
Simply: I would like to have something similar as shown at the original Apex - example: (JavaScript Basic Column Chart Example – ApexCharts.js)
Thanks to anyone who can help with this
When using zoom or pan, how do I stop chart updates from resetting the view span back to default?
I ended up using chartjs-card but found out that you also can do a
group_by:
duration: 1month
func: sum
When I do zoom or pan I only get data for the period the graph was in in any case. In other words if it shows 24h of data and I zoom out (or pan), I still only see that original 24h of data. How did you get it to show more?
It doesn’t show more than the set time span. But the problem is that I have it set to 2h but when I zoom to e.g. 10 minutes period inside that 2h, it changes back to 2h full view right after new data appears. And it’s getting almost realtime data (power measurement) with 5 sec update rate.
I could of course change update rate to slower but I’d like to keep fast updates.
This seems to work better when I enable brush, then also zoom and pan buttons work correctly. Zoom reset doesn’t work, it just does “something”. To reset zoom I have to move brush to the end of the chart and then next chart value update resets zoom to default brush span value.
Do someone know how to only enable tooltip on specific series?
I currently have this (code) but if i hover on the two other graphs then it still shows the value
apex_config:
xaxis:
labels:
show: true
tooltip:
enabled: false
tooltip:
enabledOnSeries:
- 0
x:
show: true
format: dddd - H:mm
fixed:
enabled: true
position: topRight
offsetX: -10
offsetY: -20
full code:
type: custom:apexcharts-card
now:
show: true
color: orange
show:
loading: true
update_interval: 2m
header:
show: true
title: Beste
graph_span: 3d
span:
start: day
offset: '-1d'
apex_config:
grid:
show: false
legend:
show: false
xaxis:
labels:
show: true
tooltip:
enabled: false
tooltip:
enabled: true
enabledOnSeries:
- 0
x:
show: true
format: dddd - H:mm
fixed:
enabled: true
position: topRight
offsetX: -10
offsetY: -20
yaxis:
- id: pris
min: 0
apex_config:
decimalsInFloat: 2
forceNiceScale: true
labels:
show: false
- id: forbruk
min: 0
apex_config:
opposite: true
decimalsInFloat: 0
labels:
show: false
- id: powersaver
apex_config:
labels:
show: false
series:
- entity: sensor.powersaver
yaxis_id: pris
name: Pris
extend_to: end
color: green
type: line
curve: straight
stroke_width: 2
data_generator: |
return entity.attributes.hours.map((entry) => {
return [new Date(entry.start), entry.price];
});
- entity: sensor.powersaver
data_generator: |
return entity.attributes.hours.map((entry) => {
return [new Date(entry.start), entry.onOff];
});
yaxis_id: powersaver
name: ' '
color: green
type: area
opacity: 0.2
curve: stepline
stroke_width: 0
show:
in_header: false
name_in_header: false
datalabels: false
- entity: sensor.varmtvannsbereder_sanntid
yaxis_id: forbruk
name: Forbruk
extend_to: now
color: orange
type: column
curve: stepline
stroke_width: 1
group_by:
func: avg
duration: 60m
Is there a way to use a bar chart to show how long a sensor stays in any given state over a period of time?
1 Like
I expect this is because your xaxis type is set to datetime. You will have to try another option but the result may not satisfactory, I’m not sure…
Looks like you can do it with bar charts JavaScript Column Chart with nagative values – ApexCharts.js so maybe look at combining the options there with then similarly named area charts with negative values?
I always check those docs also, but did not see the option for that (which does not mean that it does not exist).