Hi all,
I’m trying to build a custom widget in MainUI with an oh-chart and I ran into a strange issue with dynamic chart grid margins.
Background: I need to adjust the chart grid margins dynamically because the number and position of Y axes can vary (e.g. multiple axes on the left or right side). Without adjusting the grid margins, axis labels overlap or are cut off.
In the widget, I pass these props:
- gridLeft
- gridRight
- gridTop
- gridBottom
They are shown correctly in a debug label inside the widget, so the props definitely arrive.
However, when I use them here:
grid:
- component: oh-grid
config:
includeLabels: true
left: '=props.gridLeft ? props.gridLeft : 70'
right: '=props.gridRight ? props.gridRight : 90'
top: '=props.gridTop ? props.gridTop : 60'
bottom: '=props.gridBottom ? props.gridBottom : 26'
the widget props arrive correctly and the debug labels show the expected values, but oh-grid behaves as if the dynamic margins were 0, regardless of the expression used.
If I replace the dynamic value with a fixed number, for example:
left: 200
then the chart reacts immediately and the plot area is shifted as expected.
Minimal test widget
I reduced the widget to a very small reproducible example:
uid: chart_grid_test
tags: []
props:
parameterGroups:
- name: general
label: General
parameters:
- name: gridLeft
label: Grid left
type: INTEGER
required: false
default: 70
groupName: general
- name: gridRight
label: Grid right
type: INTEGER
required: false
default: 90
groupName: general
- name: gridTop
label: Grid top
type: INTEGER
required: false
default: 60
groupName: general
- name: gridBottom
label: Grid bottom
type: INTEGER
required: false
default: 26
groupName: general
component: oh-card
config:
title: Chart Grid Test
slots:
content:
- component: Label
config:
text: '="gridLeft=" + props.gridLeft + " | gridRight=" + props.gridRight + " | gridTop=" + props.gridTop + " | gridBottom=" + props.gridBottom'
- component: oh-chart
config:
period: "2D"
chartType: ""
height: "50vh"
slots:
grid:
- component: oh-grid
config:
includeLabels: true
left: '=props.gridLeft ? props.gridLeft : 70'
right: '=props.gridRight ? props.gridRight : 90'
top: '=props.gridTop ? props.gridTop : 60'
bottom: '=props.gridBottom ? props.gridBottom : 26'
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
name: "Humidity"
position: "left"
- component: oh-value-axis
config:
gridIndex: 0
name: "Temp."
position: "right"
series:
- component: oh-time-series
config:
item: "Feuchtesensor01_SoilMoisture"
name: "Humidity"
type: line
service: influxdb
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
item: "Feuchtesensor01_Temperature"
name: "Temperature"
type: line
service: influxdb
xAxisIndex: 0
yAxisIndex: 1
Is this a known limitation/ bug of oh-chart/ oh-grid in custom widgets?
Or is there a specific way left/right/top/bottom need to be passed so that they are actually applied dynamically?
Many Thanks in advance!
(I am using openHAB 5.1.4 in Docker on a Synology NAS, and I am testing the UI in Microsoft Edge.)