I have a problem with the stacked: true option.
When I don’t use the option I get this picture:
It looks correct but the bars should be broader and should lay in each other length.
But when I use the stacked option I get this picture:
This picture look nice but the second “dimmed” line is not correct.
How could I get that second line correct with the stacked option?
Is there a way to use service return value in a chart? I currently have a chart that plots hourly forecast temperature using the forcast attribute of a weather entity. With the new model of weather entities that uses service return values I can’t figure out how to get the hourly forecast data into apex.
This is what my chart currently looks like using the old attribute based model - 24h history on the left side and 24h forecast on the right.
apex_config:
legend:
showForZeroSeries: false
If you want to hide things less than a specifc value transform the value to be zero.
Struggling to find an answer to this.
Would like to move the title and value up with less space between them, cab anyone advise?
I am looking to draw a donut based on hoe long time a sensor have been in each of its 5 states. I have a input_select.ventilation that has 5 states. It switches between the states based on its power consumption:
Off
Level 1
Level 2
Level 3
Level 4
I would like to graph for what portion of the day so far it has been in each state. For instance
Off - 0%
Level 1 - 10%
Level 2 - 50%
Level 3 - 30%
Level 4 - 10%
And then draw this in a donut. How can this be done?
Yep, with me it is
Good evening
I’m desperately looking for a setting to change the size of a donut graphic.
Here is my configuration:
type: horizontal-stack
cards:
- type: custom:apexcharts-card
chart_type: donut
header:
show: true
title: Generation Jour
show_states: true
colorize_states: true
apex_config:
chart:
toolbar:
show: false
zoom:
enabled: true
tools:
zoom: true
zoomin: true
zoomout: true
pan: true
reset: true
stroke:
width: 1
curve: smooth
legend:
show: false
responsive:
- breakpoint: 800
options:
chart:
height: 360px
- breakpoint: 1300
options:
chart:
height: 360px
- breakpoint: 10000
options:
chart:
height: 375px
series:
- entity: sensor.totale_pv_production_day
name: Solaire
color: rgb(255, 155, 48)
- entity: sensor.decharge_batterie_daily
name: Batterie
color: rgb(151, 90, 182)
- entity: sensor.shellyem_consommation_grid_positif_daily
name: Grid
color: rgb(84, 144, 194)
- type: custom:apexcharts-card
chart_type: donut
header:
show: true
title: Origine Generation
show_states: true
colorize_states: true
apex_config:
chart:
toolbar:
show: false
autoSelected: zoom
stroke:
width: 1
curve: smooth
legend:
show: false
responsive:
- breakpoint: 800
options:
chart:
height: 360px
- breakpoint: 1300
options:
chart:
height: 360px
- breakpoint: 10000
options:
chart:
height: 355px
series:
- entity: sensor.consommation_electrique_maison_daily
name: Consommation
- entity: sensor.charge_batterie_jour
name: Charge
view_layout:
grid-area: right2
and what it gives:
Thanks for your help
Hi all,
How do you hide the lines?
I suspect not, but is it possible to access the HA states object to get the value of another entity in an EVAL function?
Hello. Won’t you share the code?)
How do I get apexcharts to display the entity name for each bar in my bar graph? I do not want time on the bottom axis.
Code to show last 24hrs temp and next 24hrs forecast temp on one graph. Also colors the line according to temperature.
- type: custom:apexcharts-card
graph_span: 48h
update_interval: 60s
now:
show: true
span:
offset: +24h
apex_config:
chart:
height: 220px
grid:
show: false
legend:
show: false
xaxis:
axisBorder:
show: false
axisTicks:
show: false
spanGaps: false
experimental:
color_threshold: true
header:
show: true
floating: false
show_states: true
colorize_states: true
series:
# Ecowiit temperature sensor
- entity: sensor.gw1100b_v2_2_0_outdoor_temperature
color: black
opacity: 1
stroke_width: 1
extend_to: now
name: Outside
type: line
show:
in_chart: true
header_color_threshold: true
extremas: true
yaxis_id: Temperature
color_threshold:
- value: 0
color: rgb(224,123,222)
- value: 20
color: rgb(187, 116, 212)
- value: 30
color: rgb(116, 92, 219)
- value: 40
color: rgb(23, 210, 227)
- value: 50
color: rgb(0,215,144)
- value: 60
color: rgb(94,210,48)
- value: 70
color: rgb(255,255,101)
- value: 80
color: rgb(250,130,46)
- value: 90
color: rgb(180,35,17)
- value: 100
color: rgb(175,0,0)
# US National weather service forecast temps
- entity: weather.rrrc1_hourly
color: black
data_generator: |
return entity.attributes.forecast.map((fcst, index) => {
return [fcst.datetime,fcst.temperature];
});
opacity: 0.7
stroke_width: 1
name: Forecast
type: line
show:
in_chart: true
in_header: false
extremas: true
yaxis_id: Temperature
color_threshold:
- value: 0
color: rgb(224,123,222)
- value: 20
color: rgb(187, 116, 212)
- value: 30
color: rgb(116, 92, 219)
- value: 40
color: rgb(23, 210, 227)
- value: 50
color: rgb(0,215,144)
- value: 60
color: rgb(94,210,48)
- value: 70
color: rgb(255,255,101)
- value: 80
color: rgb(250,130,46)
- value: 90
color: rgb(180,35,17)
- value: 100
color: rgb(175,0,0)
- entity: sensor.gw1100b_v2_2_0_humidity
color: white
name: Humidity
yaxis_id: Humidity
show:
in_chart: false
in_header: true
extremas: false
yaxis:
- id: Temperature
opposite: true
show: true
align_to: 5
decimals: 0
apex_config:
tickAmount: 5
- id: Humidity
show: false
Fantastic. You solved a problem I’ve been trying to find a hack for.
I need to create a file with an apex chart.
It will be displayed in an openhasp panel, so the card itself cannot be used.
Any ideas on how to accomplish that?
It seems like the basis for apex charts, apex chart.js, has the possibility to output to a file, but the ha card apparently doesn’t support that.
If you know other ha cards that can do it, that would be helpful too!
I use this to control size:
apex_config:
chart:
height: 405px
Please help me to sort out the error.
apexcharts-card version 2.0.4 /// value.series[1] is not a ChartCardSeriesExternalConfig value.series[1].yaxis_id is not a string value.series[1].yaxis is extraneous value.series[1].yaxis is extraneous
Code
type: custom:apexcharts-card
graph_span: 48h
update_interval: 60s
now:
show: true
span:
offset: +24h
apex_config:
chart:
height: 220px
grid:
show: false
legend:
show: false
xaxis:
axisBorder:
show: false
axisTicks:
show: false
spanGaps: false
experimental:
color_threshold: true
header:
show: true
floating: false
show_states: true
colorize_states: true
series:
- entity: sensor.datchik_temperatury_na_pervom_etazhe_temperature
color: black
opacity: 1
stroke_width: 1
extend_to: now
name: Климат на первом этаже
type: line
show:
in_chart: true
header_color_threshold: true
extremas: true
yaxis_id: Temperature
color_threshold:
- value: -10
color: rgb(224,123,222)
- value: -5
color: rgb(187, 116, 212)
- value: 0
color: rgb(116, 92, 219)
- value: 5
color: rgb(23, 210, 227)
- value: 10
color: rgb(0,215,144)
- value: 15
color: rgb(94,210,48)
- value: 20
color: rgb(255,255,101)
- value: 25
color: rgb(250,130,46)
- value: 30
color: rgb(180,35,17)
- value: 35
color: rgb(175,0,0)
- entity: sensor.datchik_temperatury_na_pervom_etazhe_humidity
color: white
name: Влажность
yaxis_id:
show:
in_chart: false
in_header: true
extremas: false
yaxis:
- id: Temperature
opposite: true
show: true
align_to: 5
decimals: 0
apex_config:
tickAmount: 5
- id: Humidity
show: false
You’ve missed Humidity after this ?
yaxis_id: Humidity
and yaxis definition needs to be tabbed back
- entity: sensor.datchik_temperatury_na_pervom_etazhe_humidity
color: white
name: Влажность
yaxis_id: Humidity
show:
in_chart: false
in_header: true
extremas: false
yaxis:
- id: Temperature
opposite: true
show: true
align_to: 5
decimals: 0
apex_config:
tickAmount: 5
- id: Humidity
show: false
Another error appears. I think the problem is the gaps.
bad indentation of a mapping entry (64:11)
61 | color: rgb(175,0,0)
62 |
63 | - entity: sensor.datchik_temperatury_na ...
64 | color: white
----------------^
65 | name: Влажность
66 | yaxis_id: Humidity
After correcting the spaces, an error appears.
/// apexcharts-card version 2.0.4 /// value.series[1] is not a ChartCardSeriesExternalConfig value.series[1].show is not a ChartCardSeriesShowConfigExt; value.series[1].show is not an object value.series[1].in_chart is extraneous value.series[1].in_header is extraneous value.series[1].in_chart is extraneous value.series[1].in_header is extraneous
Can you post the whole code so I can see the indents ?