Hi, Im trying out new sections. How can I change the chart to use the whole width?
Hello, I can’t manage to display the petrol prices with 3 digits after the decimal point.
What am I doing wrong
type: custom:apexcharts-card
experimental:
color_threshold: true
graph_span: 3d
span:
offset: '-60m'
show:
last_updated: true
header:
standard_format: true
show: true
show_states: true
title: Benzinpreise
colorize_states: true
series:
- entity: sensor.avia_zur_achmuhle_1_super_e10
name: AVIA
type: line
color: orange
group_by:
func: last
duration: 15m
stroke_width: 1
show:
extremas: true
- entity: sensor.esso_bahnhofstr_20_super_e10
name: ESSO
type: line
color: darkred
group_by:
func: last
duration: 15m
stroke_width: 1
show:
extremas: true
now:
show: true
color: silver
label: Now
apex_config:
chart:
zoom:
type: x
enabled: true
autoScaleYaxis: false
toolbar:
show: true
autoSelected: zoom
xaxis.type: datetime
stroke:
width: 2
curve: smooth
For me unusual to see this as it should present the state value, which I assume has 3 digits or?
Try adding this to the series
float_precision: 3
EDIT: and why are you grouping the values … .does this single station update the prices that often that you have to group/last each 15 mins? Remove that?
1 Like
Can you show me complete code!
Many thanks
The “float…” has worked. Now only the axis is not labeled correctly
What exactly do you mean by “grouping the values” How would you build this up overall?
You added
group_by:
func: last
duration: 15m
This assumes that you have a high refresh rate and you only want the last value of each 15 mins… I stronly doubt that petrol stations update more than maybe once or twice a day, oder?
It seems pointless and if so: remove
EDIT: what do you mean with y-axis?
ok thanks… that probably came in through trial and error,
i have removed it. Many THANKS
The problem with the yaxis was due to `decimals: 3’
Hmm… seeing your graph it seems to update a lot each day so I may have to re on earlier statements of once/twice a day but grouping is not really needed, I use this when I have tempsensors that update every 1 minute and printing a multi-day graph slows down a lot
1 Like
And a second problem, how do I get the values displayed in a nice form above the bar?
type: custom:apexcharts-card
graph_span: 7d
span:
end: day
header:
show: true
title: TEST
apex_config:
chart:
type: area
height: 250
stroke:
show: true
width: 1
curve: smooth
legend:
show: true
dataLabels:
enabled: true
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
xaxis:
labels:
format: dd-MMM
series:
- color: rgb(51, 102, 255)
entity: sensor.energy_consumption_daily
type: column
group_by:
func: max
duration: 24h
add to the series
show:
datalabels: true
and this
apex_config:
dataLabels:
enabled: true
offsetY: -10
1 Like
wow thats great … thanks dear
I have a strange problem, could be a RTL problem or something like that,
As soon as I configure the HA system to the English language it works well, if I return the language to the Hebrew language the problem returns. Maybe someone knows this problem?
The problem exists on a Iphone device
I am attaching 2 photos.
Picture that doesn’t look right in Hebrew
Picture that it looks normal in English
and this the code of card
type: custom:apexcharts-card
apex_config:
chart:
height: 300px
tooltip:
'y':
formatter: |
function (value) {
return value.toFixed(0); // מציג את הערך עצמו
}
dataLabels:
enabled: true
offsetY: -10
style:
fontSize: 12px
colors:
- '#000'
plotOptions:
bar:
endingShape: rounded
markers:
size: 5
colors:
- '#FF0000'
strokeColor: '#000'
strokeWidth: 2
yaxis:
min: 0
max: 600
decimals: 0
tickAmount: 6
title:
text: כמות האוכל (ml)
graph_span: 30d
span:
end: day
show:
last_updated: true
header:
show: true
colorize_states: true
title: כמות אוכל חודשית
series:
- entity: sensor.kmvt_vkl_yvmyt_2
show:
header_color_threshold: true
extremas: true
as_duration: hour
type: column
name: כמות אוכל
group_by:
func: last
duration: 1day
Anyone that can point me to the right spot to hide an entity in the legend? this is just for one entity out of a few that I don’t need a leden for.
apex_config:
legend:
show: false
doesn’t do the trick
It is in the docs
RomRider/apexcharts-card: 
A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant (github.com)
1 Like
Can someone help me with my code?
This is my graph. If I put graph_span: 24h it shows me only 17 bars, if I put graph_span: 12h it shows only 4. I have no idea why.
type: custom:apexcharts-card
span:
offset: '-1sec'
apex_config:
chart:
type: area
height: 200
stroke:
show: true
width: 1
curve: smooth
legend:
show: false
dataLabels:
enabled: true
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
header:
show: true
show_states: true
colorize_states: true
graph_span: 24h
series:
- color: rgb(255,120,80)
entity: sensor.xiaomi_lywsd03mmc_z_temperature
name: temperature
type: column
- color: rgb(0, 120, 255)
entity: sensor.xiaomi_lywsd03mmc_z_humidity
type: column
name: humidity
show:
in_chart: false
in_header: true
all_series_config:
curve: smooth
stroke_width: 10
statistics:
type: mean
period: hour
show:
extremas: true
Hi, I’m new to HA, ApexCharts and coding in general. I have simple problem I want solved but cannot find a solution.
I have created two utility kWh meters (heat out and power in) that I display in a chart. This all works fine.
But in this chart I want to display a third line graph (COP) that basically divides the value of the first entity by the value of the second entity.
I simply don’t have enough knowledge and searched for an example but can’t find any. Anyone have hint for me?
type: custom:apexcharts-card
cache: true
header:
standard_format: false
show: true
show_states: true
colorize_states: true
title: Quatt warmte
stacked: false
graph_span: 1d
span:
end: minute
update_interval: 15m
apex_config:
legend:
show: false
all_series_config:
type: column
extend_to: false
stroke_width: 3
statistics:
type: change
float_precision: 3
series:
- entity: sensor.quatt_warmte_uit
name: Warmte afgifte
extend_to: false
color: steelblue
- entity: sensor.quatt_kwh
name: Electra gebruik
extend_to: false
color: orange
You need to create a separate (template) entity that does this and add that to the graph.
Maybe a stupid question as I have not found anyway to do this so far.
You can add a line to a graph on the X axis, you can also do this on the Y axis. Is there a way to do a line on an angle like a 45 degree angle between 2 points. The 2 points as x,y locations on the graph.
Hi!
I can’t seem to get the area chart to be drawn on top of the bar chart. I have the series for bar chart first and tried tried moving the y-axis definition last but can’t get it to work so I hope it’s possible 
.
The code from my github:
If using line type instead of area type, it will be drawn correctly.
type: custom:config-template-card
variables:
nordpool_sensor: '''sensor.nordpool'''
grid_import_sensor: '''sensor.sigen_accumulated_grid_energy_import'''
battery_soc_sensor: '''sensor.sigen_energy_storage_system_soc'''
price_y_axis_unit: '''öre'''
energy_y_axis_unit: '''kWh'''
price_overview_unit: '''öre/kWh'''
additional_cost_template: '''* 100 +5'''
decimals_in_prices: 0
decimals_in_energy: 1
chart_price_cutoff_coerficient: 0.1
chart_title: '''Electricity prices today'''
total_purchease_price_text: '''Total purchease price'''
grid_import_text: '''Grid Import'''
battery_soc_text: '''Battery SOC'''
lowest_price_text: '''Lowest to come'''
highest_price_text: '''Highest to come'''
price_now_text: '''Price now'''
now_text: '''Now'''
get_chart_cutoff: |
(_min_price, _coefficient) => {
if (_min_price <= 0) {
return "auto";
}
return _min_price - (_min_price * _coefficient)
}
get_total_max_nordpool_price: |
(_nordpool_sensor, _additional_cost_template) => {
return states[_nordpool_sensor].attributes.raw_today.concat(states[_nordpool_sensor].attributes.raw_tomorrow).map(data=> eval("data.value"+_additional_cost_template)).reduce((a, b) => Math.max(a, b), -Infinity)
}
get_total_min_nordpool_price: |
(_nordpool_sensor, _additional_cost_template) => {
return states[_nordpool_sensor].attributes.raw_today.concat(states[_nordpool_sensor].attributes.raw_tomorrow).map(data=> eval("data.value"+_additional_cost_template)).reduce((a, b) => Math.min(a, b), Infinity)
}
get_low_bottom_threshold_nordpool_price: |
(_min, _max) => {
return parseFloat(_min) + parseFloat(((_max) - parseFloat(_max)) /10)
}
get_low_threshold_nordpool_price: |
(_min, _max) => {
return parseFloat(_min) + parseFloat(((_max) - parseFloat(_min)) /3)
}
get_high_threshold_nordpool_price: |
(_min, _max) => {
return parseFloat(_min)
+ (( parseFloat(_max) - parseFloat(_min) ) /3) * 2
}
get_high_top_threshold_nordpool_price: |
(_min, _max) => {
return parseFloat(_min) + parseFloat(((_max) - parseFloat(_min)) /10)*9
}
get_total_prices: |
cost_template => {
return "return (entity.attributes.raw_today.map((start, index) => {return [new Date(start['start']).getTime(), entity.attributes.raw_today[index]['value']"
+ cost_template
+ "];})).concat(entity.attributes.raw_tomorrow.map((start, index) => {return [new Date(start['start']).getTime(),entity.attributes.raw_tomorrow[index]['value'] "
+ cost_template + "];}));"
}
entities:
- ${nordpool_sensor]
card:
type: custom:apexcharts-card
graph_span: >-
${ states[nordpool_sensor].attributes.raw_today.length +
states[nordpool_sensor].attributes.raw_tomorrow.length + 'h' }
yaxis:
- id: y-price
min: >-
${get_chart_cutoff(get_total_min_nordpool_price(nordpool_sensor,additional_cost_template),chart_price_cutoff_coerficient)}
max: auto
apex_config:
opposite: false
forceNiceScale: true
decimalsInFloat: ${decimals_in_prices}
labels:
formatter: >
${"EVAL:function(value) {return value.toFixed("
+ decimals_in_prices
+ ") + ' " + price_y_axis_unit + "' }"
- id: y-energy
min: 0
max: auto
apex_config:
opposite: true
forceNiceScale: true
decimalsInFloat: ${decimals_in_energy}
labels:
formatter: |
${"EVAL:function(value) {return value.toFixed("
+ decimals_in_energy
+ ") + ' " + energy_y_axis_unit + "' }"
- id: y-SOC
show: false
min: 0
max: 100
apex_config:
chart:
height: 340px
legend:
show: false
title:
floating: false
align: center
style:
fontSize: 20px
fontWeight: bold
xaxis:
labels:
datetimeFormatter:
hour: HH:mm
show:
last_updated: true
experimental:
color_threshold: true
header:
title: ${chart_title}
show: true
show_states: true
colorize_states: true
span:
start: day
now:
show: true
label: ${now_text}
series:
- entity: ${nordpool_sensor}
yaxis_id: y-price
name: ${total_purchease_price_text}
offset: '-30min'
float_precision: ${decimals_in_prices}
show:
extremas: true
in_header: false
header_color_threshold: true
type: column
data_generator: ${get_total_prices(additional_cost_template)}
color_threshold:
- value: -1000
color: '#00f738'
- value: >-
${get_low_bottom_threshold_nordpool_price(get_total_min_nordpool_price(nordpool_sensor, additional_cost_template), get_total_max_nordpool_price(nordpool_sensor, additional_cost_template) )}
color: '#28a745'
- value: >-
${get_low_threshold_nordpool_price(get_total_min_nordpool_price(nordpool_sensor,additional_cost_template), get_total_max_nordpool_price(nordpool_sensor, additional_cost_template))}
color: '#ffed4a'
- value: >-
${get_high_threshold_nordpool_price(get_total_min_nordpool_price(nordpool_sensor,additional_cost_template), get_total_max_nordpool_price(nordpool_sensor, additional_cost_template))}
color: '#fd7e14'
- value: >-
${get_high_top_threshold_nordpool_price(get_total_min_nordpool_price(nordpool_sensor,additional_cost_template),get_total_max_nordpool_price(nordpool_sensor, additional_cost_template))}
color: '#dc3545'
- entity: ${grid_import_sensor}
yaxis_id: y-energy
name: ${grid_import_text}
color: '#007bff'
float_precision: ${decimals_in_energy}
show:
extremas: false
in_header: true
header_color_threshold: true
type: area
stroke_width: 1
opacity: 0.2
extend_to: false
unit: ${energy_y_axis_unit}
group_by:
func: delta
duration: 1h
- entity: ${battery_soc_sensor}
yaxis_id: y-SOC
name: ${battery_soc_text}
color: '#6610f2 '
float_precision: 0
show:
extremas: false
in_header: true
header_color_threshold: true
type: area
stroke_width: 1
opacity: 0.4
extend_to: false
group_by:
func: avg
duration: 1h
- entity: ${nordpool_sensor}
color: '#00f738'
float_precision: ${decimals_in_prices}
stroke_width: 2
name: ${lowest_price_text}
unit: ${price_overview_unit}
show:
in_chart: false
legend_value: false
group_by:
func: min
duration: 2d
data_generator: ${get_total_prices(additional_cost_template)}
- entity: ${nordpool_sensor}
name: ${price_now_text}
color: orange
type: column
unit: ${price_overview_unit}
show:
in_chart: false
float_precision: ${decimals_in_prices}
data_generator: ${get_total_prices(additional_cost_template)}
- entity: ${nordpool_sensor}
type: column
color: '#dc3545'
float_precision: ${decimals_in_prices}
stroke_width: 2
name: ${highest_price_text}
unit: ${price_overview_unit}
show:
in_chart: false
legend_value: false
group_by:
func: max
duration: 2d
data_generator: ${get_total_prices(additional_cost_template)}
layout_options:
grid_columns: full
I believe you mean to have the area bring to front. This does not work (there is no option) but you can make the bar less opaque …is not the same, I know