Sort of confirms my experience too. Again, I think you will benefit from a utility meter for these values on monthly basis. But… if (!) the monthly values are good for every month, then I would try to fiddle with the labels instead
@sheilmann possibly your data is different? Could depend on daily stats vs. 30 min stats…just guessing loudly as no clue and tbh, very little incentive to dive deeper 
I have a utility meter and I want to show the end costs of each month in a bar chart.
Is this a different topic now or still the same issue? For having (any) consumption combined with costs/unit there are plenty of other posts outside of this Apexchart one.
Anyone know how to change the title/header font size?
My goal is to shrink a little so the all fit on the same line.
type: custom:apexcharts-card
now:
show: true
label: Aktuellt pris
color: var(--primary-color)
graph_span: 24h
show:
last_updated: true
span:
start: day
offset: +0H
header:
title: Elpriset idag/imorgon
show: true
show_states: true
colorize_states: true
floating: false
apex_config:
show:
offset_in_name: false
chart:
height: 250px
legend:
showForSingleSeries: true
plotOptions:
bar:
borderRadius: 0
yaxis:
min: 0
decimalsInFloat: 2
tickAmount: 10
forceNiceScale: true
hours_12: false
stacked: false
experimental:
color_threshold: true
all_series_config:
show:
legend_value: false
datalabels: false
extremas: true
in_brush: false
float_precision: 1
type: area
invert: false
fill_raw: zero
series:
- entity: sensor.nordpool_kwh_se3_sek_3_10_0
type: column
color: lightblue
color_threshold:
- value: 0
color: "#8be9fd"
- value: 1
color: "#50fa7b"
- value: 1.5
color: "#f1fa8c"
- value: 2
color: "#ffb86c"
- value: 2.5
color: "#ff79c6"
- value: 3
color: "#ff5555"
float_precision: 2
stroke_width: 0
name: Idag
unit: SEK/kWh
show:
legend_value: false
extremas: true
in_header: false
header_color_threshold: true
data_generator: |
return entity.attributes.today.map((price, index) => {
return [new Date().setHours(index,0,0), price];
});
- entity: sensor.nordpool_kwh_se3_sek_3_10_0
attribute: min
type: column
color: "#8be9fd"
float_precision: 2
stroke_width: 2
name: Lägsta
group_by:
duration: 1d
show:
in_chart: false
in_header: true
legend_value: false
- entity: sensor.nordpool_kwh_se3_sek_3_10_0
name: Nuvarande
type: column
show:
legend_value: false
extremas: true
in_header: true
header_color_threshold: true
in_chart: false
float_precision: 2
color_threshold:
- value: 0
color: "#8be9fd"
- value: 1
color: "#50fa7b"
- value: 1.5
color: "#f1fa8c"
- value: 2
color: "#ffb86c"
- value: 2.5
color: "#ff79c6"
- value: 3
color: "#ff5555"
- entity: sensor.nordpool_kwh_se3_sek_3_10_0
attribute: average
type: column
color: "#ffb86c"
float_precision: 2
stroke_width: 2
name: Idag Medel
group_by:
duration: 1d
show:
in_chart: false
in_header: false
legend_value: false
- entity: sensor.nordpool_kwh_se3_sek_3_10_0
attribute: max
type: column
color: "#ff79c6"
float_precision: 2
stroke_width: 2
name: Högsta
group_by:
duration: 1d
show:
in_chart: false
in_header: true
legend_value: false
- entity: sensor.nordpool_kwh_se3_sek_3_10_0
color: "#6272a4"
extend_to: false
name: Imorgon
unit: SEK/kWh
float_precision: 2
opacity: 0.5
stroke_width: 2
show:
extremas: true
in_header: false
legend_value: false
data_generator: |
return entity.attributes.tomorrow.map((price, index) => {
return [new Date().setHours(index,0,0), price];
});
Forgive my naivety but I am simply looking for a way to change the color of a graph above and below zero (for temperature). I can get the color to change using the gradient option. I have it set at .1 and 0 but this is not giving the desired effects. I just want above zero one solid color and below a different color.
RTM…
threshold
Clearly not following the settings but the doc already mentioned a lot (!) of possible issues
EDIT, I tested a simple thing, got this first, gaps seem to have an adverse effect
Then added fill_raw…much better
With issues: read the issues on the github too, also the closed ones as these pointed me to above solution (for me that is)
You guys seem angry and wanting to appear “better” than everybody. But isn’t the point of these forums to ask for help and get it? Not be an outlet for people to belittle other people. I mean, in my field I help people in the forums. But if you are just trying to feel cool? Ok, you are “cool”. Although I would feel you were cooler if you could actually answer the question. Constantly being incorrect is not the brag you think it is.
Whatever you may interprete as angry may also be plain direct…instead of asking you can read the docs and the issues. Just start counting some of the questions and how often they re-appear then you might understand some of (my) comments
simple: I have a sensor that calculates the monthly costs. And I like to show this sensor on a monthly base in a bar chart, so that I can see, what I have used in Jan, Feb and so. Works, but the lables are wrong. That is my issue.
I guess the only chance will be to use the max option and then only 1 value for a month will be shown.
If you have issues or want a simple safe and reusable records of the data I suggest to use a monthly helper input number and an automation.
Every day on 23:59 the automation will write the most recent value into the monthly input number .
This way you get an update of the value every midnight of the increasing value. At the end of the month the highest value will show the consumption.
You can also do it only once a month but I prefer it daily. And then graphs are much easier to show.
I usually do it for the average daily consumption per month which will change vor a month and this way I get the daily figures saved.
Someone can tell me, why my third value, the SoC is not displayed in the diagram? It’s just the SoC (state of charge) of my Battery.
Here is my code:
type: custom:apexcharts-card
apex_config:
chart:
height: 230px
legend:
show: true
yaxis:
- id: left
min: ~0
max: ~500
decimals: 0
apex_config:
tickAmount: 4
forceNiceScale: true
title:
text: W
rotate: -90
- id: right
opposite: true
min: 0
max: 100
decimals: 0
apex_config:
tickAmount: 5
forceNiceScale: true
title:
text: "%"
all_series_config:
stroke_width: 1
float_precision: 0
show:
in_header: raw
legend_value: false
type: area
opacity: 0.2
statistics:
type: mean
period: 5minute
span:
end: minute
graph_span: 24h
header:
show: true
title: ""
show_states: true
colorize_states: true
floating: false
series:
- entity: sensor.plenticore_plus_10_sum_power_of_all_pv_dc_inputs
name: Solarproduktion
color: orange
yaxis_id: left
- entity: sensor.plenticore_plus_10_home_power
name: Hausverbrauch
color: purple
yaxis_id: left
- entity: sensor.plenticore_plus_10_battery_soc
name: SoC
color: teal
yaxis_id: right
dataLabels:
style:
fontSize: 0.6rem
formatter: >
return value.toFixed(1) + '%'; # Direkt als Prozent anzeigen, ohne
Umrechnung
grid_options:
columns: 24
experimental:
disable_config_validation: true
card_mod:
style: |
div#header__title {
font-size: 18px;
margin-top:0.25rem;
margin-bottom:0.5rem
}
div#header__states {
justify-content: start;
}
div#state__value #state{
font-size: 18px;
padding-right:5px
}
column_span: 2
Hello, is there an option to set font sizes for header (title and states)? apex_config seems not to work there
sorry - I did not know, that I need to install card-mod via HACS first and access style options via card-mod. Works fine!
Does the sensor output a number or a string?
Remove this and you will likely see the light
I think it‘s a number, but not 100% sure. Device class is battery.
Then the whole code does not parse.
Exactly…and what does the error(s) say? You are filtering out any error based on mis-configuration …