Hi Team
openHAB 5.03
openhabian RP5 8GB Ram
I have a custom widget as below
I have tried replacing many sections and moved it inside the series and outside and you will see what I have attempted with the name: and I have an example where the legend displays legend with a title “this one works”
My understanding is I should be able to leverage the oh-repeater to do the label as well but cannot figure out where or if my syntax is wrong.
I have a PIE chart using a VERY similar structure and it displays the legend just fine. now Bar charts are only available since OH 5. so not sure if something is missing. I also searched for Apache eCharts issues but did not seem to find anything relevant
essentially the names of the Consumers should be in the legends with one for each where “This works” is ciurrently on the graph
Note: If you see items that have strange like “legendx:” postfixes (like X, N, NN etc thats so I have unique lines and can see what I have tried or something that has been disabled or something inserted for testing and could always be that I have broken something else with this as well
For example you wills see that there is a lengendx: further down - rename that the legend and rename the item corresponding higher up and you can see the result without haveing to delete anything.
uid: chart_bar_energy_dynamic_test
tags:
- KnownConsumer
- Version:1.2
- chart
props:
parameters:
- default: Known Consumers
description: the title for the group
label: title
name: title
required: false
type: TEXT
- default: KnownConsumer
description: the tag for the group
label: groupTag
name: groupTag
required: false
type: TEXT
- default: 75%
description: the vertical position of the chart
label: chartPosV
name: chartPosV
required: false
type: TEXT
- default: bar
description: the type of the chart
label: chartType
name: chartType
required: false
type: TEXT
pattern: pie|bar
options:
- label: Pie Chart
value: pie
- label: Bar Chart
value: bar
- default: auto
description: the height of the chart
label: chartHeight
name: chartHeight
required: false
type: TEXT
- default: auto
description: the Width of the chart
label: chartWidth
name: chartWidth
required: false
type: TEXT
- default: auto
description: the barWidth
label: barWidth
name: barWidth
required: false
- default: auto
description: Maximum of y Axis
label: yMax
name: yMax
required: false
- default: "0"
description: Minimum of y Axis
label: yMin
name: yMin
required: false
- default: "-1"
description: the minimim amount for an item to be included
label: filterItem
name: filterItem
required: false
type: TEXT
- default: "true"
description: show/Hide Legend
label: showLegend
name: showLegend
required: false
type: BOOLEAN
- default: "true"
description: show/Hide Legend
label: showTooltip
name: showTooltip
required: false
type: BOOLEAN
- default: "true"
description: show/Hide minorTick
label: minorTick
name: minorTick
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Nov 26, 2025, 12:39:50 AM
component: f7-card
config:
style:
background: =props.background || '#fff'
border: "=props.border || '1px solid #ccc'"
border-radius: 8px
padding: 10px
position: relative
text-align: center
title: =props.title || 'X'
slots:
content:
- component: oh-repeater
config:
for: energyData
fragment: true
itemTags: ="_"+props.groupTag , props.groupTag
map: |
loop.energyData_source
.filter(item => items[item.name].numericState > props.filterItem)
.map(item => ({
value: items[item.name].numericState,
name: item.label,
tooltip: items[item.name].displayState
}))
sourceType: itemsWithTags
title: test
slots:
default:
- component: oh-chart
config:
legendx:
left: left
orient: vertical
show: =props.showLegend
options:
color:
- "#f28b82"
- "#81c995"
- "#a7c7e7"
- "#fbc687"
- "#c9a0dc"
- "#9de0e6"
- "#f6a3d7"
- "#dce775"
- "#ffcccb"
- "#80cbc4"
visible: =loop.energyData_idx == 0
slots:
legend:
- component: oh-chart-legend
config:
show: true
top: 05%
this: controls placement of the legend
series:
- component: oh-data-series
config:
barWidth: =props.barWidth
colorBy: data
data: =loop.energyData
height: =props.chartHeight
label:
formatter: = (params) => `${params.data.tooltip}`
show: =props.showTooltip
this: shows this label on y axis
name: this works
nameN:
formatter: = (params) => `${params.data.name}`
show: =props.showTooltip
nameNN: =loop.energyData.map(d => d.name)
nameNNN:
- test
- trial
- test
- trial
- test
- trial
- test
- trial
- test
- trial
type: =props.chartType
width: =props.chartWidth
seriesT:
- component: oh-time-series
config:
gridIndex: 0
item: carCharger_Active_Power
name: Car Charger
noItemState: false
type: bar
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
gridIndex: 0
item: Dish_Washer_Active_Power
name: Dish Washer
type: bar
xAxisIndex: 0
yAxisIndex: 0
tooltip:
- component: oh-chart-tooltip
config:
orient: vertical
show: true
trigger: axis
xAxis:
- component: oh-category-axis
config:
axisLabel:
color: =themeOptions.dark=='dark'?'white':'black'
rotate: 45
show: true
axisLine:
show: true
axisPointer:
show: true
axisTick:
interval: 1
lineStyle:
opacity: 1
show: false
data: =loop.energyData.map(d => d.name)
gridIndex: 0
show: true
yAxis:
- component: oh-value-axis
config:
axisLabel:
align: right
margin: 23
show: true
verticalAlign: bottom
axisLine:
onZero: true
show: true
axisTick:
length: 40
gridIndex: 0
inverse: false
max: =props.yMax
min: =props.yMin
minorTick:
length: 20
show: =props.minorTick
offset: 0
scale: false
show: true
splitNumber: 10
startValue: 0