Hi
I am having some issues with creating a bar chart with Apex Chart.
- Some of the data is being cut off. There are 5 bars and the last one is being cut off.
- The x-axis spacing is not consistent.
- The last x-axis label is not being displayed.
type: custom:apexcharts-card
view_layout:
grid-area: m1
graph_span: 6month
stacked: false
span:
end: month
apex_config:
legend:
position: top
horizontalAlign: left
grid:
show: true
strokeDashArray: 0
xaxis:
lines:
show: true
yaxis:
lines:
show: true
row:
colors: grey
opacity: 0.5
column:
colors: grey
opacity: 0.5
plotOptions:
bar:
dataLabels:
orientation: vertical
position: top
background:
enabled: false
borderWidth: 0
dataLabels:
enabled: true
style:
fontSize: 10px
colors:
- grey
- grey
- grey
- grey
- grey
fontWeight: normal
background:
enabled: false
tooltip:
enabled: false
xaxis:
type: datetime
labels:
format: MMM yyyy
title:
text: Monthly Production
align: center
style:
fontWeight: regular
color: grey
fontSize: 18px
series:
- entity: sensor.sensor_inverter_calculated_pv_energy_monthly
type: column
name: Solar 🔆
color: rgb(255, 155, 48)
group_by:
func: last
duration: 1month
start_with_last: false
show:
datalabels: true
legend_value: false
as_duration: month
fill_raw: last
- entity: sensor.sensor_inverter_calculated_load_energy_monthly
type: column
color: rgb(95, 182, 173)
name: Load ⚡
group_by:
func: last
duration: 1month
start_with_last: false
show:
datalabels: true
legend_value: false
- entity: sensor.sensor_inverter_calculated_grid_energy_in_monthly
type: column
color: rgb(84, 144, 194)
name: Grid Import 💡
group_by:
func: last
duration: 1month
start_with_last: false
show:
datalabels: true
legend_value: false
- entity: sensor.sensor_inverter_calculated_battery_energy_out_monthly
type: column
color: rgb(151, 90, 182)
name: Battery Discharge 🖱️
group_by:
func: last
duration: 1month
start_with_last: false
show:
datalabels: true
legend_value: false
- entity: sensor.sensor_inverter_calculated_battery_energy_in_monthly
type: column
color: yellow
name: Battery Charge 🔋
group_by:
func: last
duration: 1month
start_with_last: false
show:
datalabels: true
legend_value: false
Here is another example of the data being cut off.
type: custom:apexcharts-card
view_layout:
grid-area: daily1
graph_span: 6d
stacked: false
span:
end: day
apex_config:
legend:
position: top
horizontalAlign: left
grid:
show: false
plotOptions:
bar:
dataLabels:
orientation: vertical
position: top
background:
enabled: false
borderWidth: 0
dataLabels:
enabled: true
style:
fontSize: 10px
colors:
- grey
- grey
- grey
- grey
- grey
fontWeight: normal
background:
enabled: false
tooltip:
enabled: false
xaxis:
labels:
format: dd MMM
title:
text: Daily Production
align: center
style:
fontWeight: regular
color: grey
fontSize: 18px
series:
- entity: sensor.sensor_inverter_calculated_pv_energy_daily
type: column
name: Solar 🔆
color: rgb(255, 155, 48)
group_by:
func: last
duration: 1d
start_with_last: false
show:
datalabels: true
legend_value: false
fill_raw: last
- entity: sensor.sensor_inverter_calculated_load_energy_daily
type: column
color: rgb(95, 182, 173)
name: Load ⚡
group_by:
func: last
duration: 1d
start_with_last: false
show:
datalabels: true
legend_value: false
- entity: sensor.sensor_inverter_calculated_grid_energy_in_daily
type: column
color: rgb(84, 144, 194)
name: Grid Import 💡
group_by:
func: last
duration: 1d
start_with_last: false
show:
datalabels: true
legend_value: false
- entity: sensor.sensor_inverter_calculated_battery_energy_out_daily
type: column
color: rgb(151, 90, 182)
name: Battery Discharge 🖱️
group_by:
func: last
duration: 1d
start_with_last: false
show:
datalabels: true
legend_value: false
- entity: sensor.sensor_inverter_calculated_battery_energy_in_daily
type: column
color: yellow
name: Battery Charge 🔋
group_by:
func: last
duration: 1d
start_with_last: false
show:
datalabels: true
legend_value: false