Here my implementation to show power import and export on one chart page. Both values are derived from a “counter” which is then “diff_last” aggregated for the charts.
Also note that I played a bit with formatting the bars lable (seach for formatter).
config:
chartType: year
label: Strom Import/Export Jahr
sidebar: true
slots:
title:
- component: oh-chart-title
config:
left: middle
show: true
text: Strom Import/Export Jahr
grid:
- component: oh-chart-grid
config:
show: true
containLabel: true
top: 10%
height: 40%
- component: oh-chart-grid
config:
show: true
containLabel: true
top: 50%
height: 40%
xAxis:
- component: oh-category-axis
config:
gridIndex: 0
splitLine:
lineStyle:
color: rgb(0,0,0)
type: dotted
show: true
axisLabel: false
splitNumber: 6
categoryType: year
monthFormat: short
weekdayFormat: short
- component: oh-category-axis
config:
gridIndex: 1
splitLine:
lineStyle:
color: rgb(0,0,0)
type: dotted
show: true
splitNumber: 6
categoryType: year
monthFormat: short
weekdayFormat: short
axisLabel:
color: rgb(0,0,0)
fontSize: 18
yAxis:
- component: oh-value-axis
config:
axisLabel:
color: rgb(0,0,0)
fontSize: 12
formatter: "{value} kWh"
margin: -20
verticalAlign: bottom
gridIndex: 0
name: Import [kWh]
nameGap: 25
nameLocation: center
nameRotate: "90"
nameTextStyle:
color: rgb(0,0,0)
fontSize: 14
scale: false
splitArea:
show: true
splitLine:
lineStyle:
color: rgb(0,0,0)
type: dotted
splitNumber: 6
- component: oh-value-axis
config:
axisLabel:
color: rgb(0,0,0)
fontSize: 12
formatter: "{value} kWh"
margin: -20
verticalAlign: bottom
gridIndex: 1
name: Export [kWh]
nameGap: 25
nameLocation: center
nameRotate: "90"
nameTextStyle:
color: rgb(0,0,0)
fontSize: 14
scale: false
splitArea:
show: true
splitLine:
lineStyle:
color: rgb(0,0,0)
type: dotted
splitNumber: 6
inverse: true
series:
- component: oh-aggregate-series
config:
name: Strom Import
item: Generic_MQTT_Thing_Smartmeter_counter_import
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: bar
dimension1: month
aggregationFunction: diff_last
color: rgb(166, 77, 255)
label:
show: true
color: black
position: top
fontWeight: bold
formatter: =v=>Number.parseFloat(v.data[1]).toFixed(1)
markLine:
data:
- type: average
- component: oh-aggregate-series
config:
name: Strom Export
item: Generic_MQTT_Thing_Smartmeter_counter_export
gridIndex: 1
xAxisIndex: 1
yAxisIndex: 1
type: bar
dimension1: month
aggregationFunction: diff_last
color: rgb(0, 153, 51)
label:
show: true
color: black
position: bottom
fontWeight: bold
formatter: =v=>Number.parseFloat(v.data[1]).toFixed(1)
markLine:
data:
- type: average
tooltip:
- component: oh-chart-tooltip
config:
confine: true
formatter: =v=>Number.parseFloat(v.data[1]).toFixed(2) + " kWh"
legend:
- component: oh-chart-legend
config:
bottom: 3
type: scroll
