Hi All
I have setup an oh-chart in a widget that looks as follows:
I would like to be able to format the period formatting as highlighted in the screen shot. I would like to prevent the overlap of the scale etc.
Any ideas on how I might achieve this?
My current YAML is as follows:
uid: Mains_Power_Monthly
tags: []
props:
parameterGroups: []
timestamp: Jun 1, 2022, 2:35:46 PM
component: f7-page
config: {}
slots:
default:
- component: f7-row
config:
style:
height: 45%
width: 100%
padding-left: 10px
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
style:
color: black
font-weight: 500
line-height: 20px
padding-left: 20px
text: Mains TOTAL Energy
- component: oh-chart
config:
chartType: month
label: Mains Consumption Comparison
period: M
slots:
dataZoom:
- component: oh-chart-datazoom
config:
show: true
type: inside
grid:
- component: oh-chart-grid
config:
includeLabels: true
legend:
- component: oh-chart-legend
config:
bottom: 3
type: scroll
series:
- component: oh-time-series
config:
gridIndex: 0
item: ShellyEM_MAINS_TotalEnergy
name: Current
type: line
xAxisIndex: 1
yAxisIndex: 0
- component: oh-time-series
config:
gridIndex: 0
item: ShellyEM_MAINS_TotalEnergy
name: Previous
offsetAmount: 1
offsetUnit: month
type: line
xAxisIndex: 0
yAxisIndex: 0
tooltip:
- component: oh-chart-tooltip
config:
confine: true
smartFormatter: true
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
- component: oh-time-axis
config:
gridIndex: 0
verticalAlign: top
yAxis:
- component: oh-value-axis
config:
position: left
containLabel: true
axisLabel:
rotate: 0
inside: false
show: true
margin: 5
showMaxLabel: false
showMinLabel: false
hideOverlap: true
fontSize: 9
align: right
gridIndex: 0
max: dataMax
min: dataMin
name: kWh
nameGap: 30
nameLocation: start
nameTextStyle:
align: right
color: black
padding: 6
verticalAlign: top
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: f7-list
config:
class:
- padding-bottom
slots:
default:
- component: oh-toggle-item
config:
color: black
title: Store current EM Mains reading
item: ShellyEM_MAINS_TotalEnergy_Switch
style:
font-size: 120%
--f7-toggle-width: 60px
--f7-toggle-height: 25px
- component: oh-list-item
config:
color: black
title: = "Usage last Month - " + (items.ShellyEM_MAINS_TotalEnergy_Monthly.state)
style:
font-size: 120%
- component: oh-list-item
config:
color: black
title: = "Now - " + (items.ShellyEM_MAINS_TotalEnergy.state) +" Was - " + (items.ShellyEM_Mains_TotalEnergy_PreviousMonth.state)
style:
font-size: 120%
Thanks in advance