SOLVED!
I had to write:
return JSON.parse(entity.state);
or, respectively,
return JSON.parse(entity.attributes.json_result);
Cheers!
1 Like
Hello, wonder if anyone could spare moment to help me figure out some configuration for Apexcharts?
I’m trying to configure a chart show the instantaneous mix of energy use in my house, whether it’s provided by the grid, batteries or the solar array. At any point in time, it could be any mix of these.
type: custom:apexcharts-card
graph_span: 1sec
header:
show: false
stacked: true
all_series_config:
type: column
series:
- entity: sensor.emoncms_import
- entity: sensor.my_battery_discharging_w
- entity: sensor.my_all_pv_wattage
transform: return x * 1000;
apex_config:
datalabels: true
plotOptions:
bar:
barHeight: 100%
horizontal: true
yaxis:
show: false
xaxis:
show: false
Firstly, can I confirm that using graph_span = 1sec is sensible?
Secondly, how can it get the values to be included in/around the bars rather than underneath in a legegnd? similar to shown here… Stacked JavaScript Bar Chart – ApexCharts.js
TIA!
Edit: I’ll fix my transform in a template, but it’s ok for now 
Hello Giuliano,
I didn’t manage to solve it as my programing skills are limited and eventually I gave up. I just saw you solved it and I give another try. Many thanks!!
Better use the donut chart to display that kind of data as horizontal bars are not officially supported in this card (it may or may not display the right data).
Ok so stumbled on to this card and am loving it.so much more control than I have ever had. Has anyone figured out how to use the donut card as a gauge or found a great replacement gauge for HA? I really like the Grafana style gauges and haven’t found much even close to that for HA.
Does this help?
type: custom:apexcharts-card
header:
show: false
chart_type: donut
series:
- entity: sensor.emoncms_import
name: Grid
color: red
- entity: sensor.my_battery_discharging_w
name: Battery
color: green
- entity: sensor.my_all_pv_wattage
name: Solar
color: yellow
apex_config:
plotOptions:
pie:
donut:
labels:
show: true
total:
show: true
2 Likes
anyway to make that a half donut?
sensor.hourly_house_energy is a Utility Meter integration in kWh:
I’m pretty sure my data is solid. Note what happens near the end when I change the formatter for my consumption series. The chart initially resembles a correct shape before snapping to 0 after other values are loaded, making me think that I have my chart misconfigured.
Edit: I just discovered that if I remove sensor.nordpool_price and sensor.house_energy_cost from series (both have yaxis_id: hidden set and show: in_chart: false), then it shows correctly:
I think I’m doing something wrong when trying to show values in the header but not in the chart and it messes up the scales because of different units.
I think I am missing something. How can I get a chart to start at 0? It seems to be starting at the lowest number. Would like that 0.12 value to start at 0.00 I am sure I am missing a setting, but for the life of me I can’t find it in the docs or searching.
I believe that this should work:
apex_config:
plotOptions:
pie:
startAngle: -90
endAngle: 90
It’s probably be a bug on my side, I’m going to check. I didn’t try this use case with multiple axis and some series not shown in the chart
Would you mind opening a bug on github please?
1 Like
Add:
type: custom:apexcharts-card
[...]
yaxis:
- min: 0
Perfect. Thank you!
This chart groups by day using an energy sensor that resets each day to 0 so it takes the max value for that time frame and graphs it. Anyway to get the time off the tooltip? So it just shows Jan 1 2022, Jan 2 2022, without 12:00:00 AM
I have searched this tread but didn’t find any solution on what I want to do.
I need do set the color_threshold values dynamically with values from 2 sensor’s. Is this possible? Or is there some workaround to achieve this?
Example…
series:
- entity: sensor.graphvalue
color_threshold:- value: {{senor.dynamicvalue1}}
color: green - value: {{senor.dynamicvalue2}}
color: yellow
- value: {{senor.dynamicvalue1}}
Thanks, I’ll check that out.
Is i possible to define the color of each axis (including value)?
I confirm this solution is working also for me, this is great!
Many thanks!!
For some reason “colorize_states: true” does not work, should it put in colors the states? show_states: true"
like this one
type: custom:apexcharts-card
graph_span: 2d
span:
end: day
header:
show: true
title: Temperatura
show_states: true
colorize_states: true
standard_format: true
floating: false
disable_actions: false
all_series_config:
fill_raw: last
curve: smooth
extend_to_end: false
show:
extremas: true
legend_value: false
offset_in_name: false
series:
- entity: sensor.aemet_temperature
name: Exterior
color: 1ed797
stroke_width: 2
yaxis_id: first
- entity: sensor.sensor_clima_temperature
name: Interior cocina
color: 71c7ec
stroke_width: 2
yaxis_id: first
- entity: sensor.broadlink_rm4_pro_temperature
name: Interior Salón
color: 1ebbd7
stroke_width: 2
yaxis_id: first
apex_config:
stroke:
show: true
legend:
show: false
dataLabels:
enabled: true
chart:
height: 200px
yaxis:
- id: first
decimals: 0
apex_config:
forceNiceScale: true
tickAmount: 5
now:
show: false
color: white
show:
last_updated: true
Is there a way to improve the performance of the charts?
Maybe by decreasing the number of data points used to plot?
1 Like