Created an issue about the key property in the custom widget disabling the inline stylesheet of the widget code on the page:
I just tried to use the key property in a card that holds an item list (among other things). Each of these items can be clicked to open an analyzer
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems: =[loop.item.name, "thermostat_" +
loop.item.name.split("_")[0] + "_dewpoint",
"thermostat_carport_dewpoint"]
and so on and so on…
However when I open the analyzer on an item the graph does not seem to be refreshed. I guess that’s because the graph opens in a popup that’s not affected by the key change. Is that correct? There is probably no way to make this work unless I create my own custom analyzer popup, right?
Yep, exactly.
That is certainly one solution. The other possibility is just to move away from the popup structure altogether. If the chart is up long enough for a refresh to be an issue then maybe it makes more sense just o navigate to a chart page instead of using the popup mechanism. Then you can definitely use different mechanism for refreshing the chart.
Ok, I thought so, thank you for confirming my assumptions.
Wow I actually never had a look at chart pages, since when do they exist? 
This looks promising. I will try them out and see what I can do with them.
Actually I would not say that it is necessary for this particular use case to have the chart open for a long time but it’s still better than having no refresh Also I always like to discover new methods that may come in handy at a later stage 
I like to use auto refresh charts, but sometimes the chart refeshes at a bad time: when I am looking in the past days or when I am zooming in.
So it is good to be able to temporarily disable the refreshing. Here is an example of the changed widget:
uid: chart_refresh
tags: []
props:
parameters: []
parameterGroups: []
timestamp: May 2, 2025, 4:58:45 PM
component: f7-card
config:
title: Refreshing oh-chart
key: =(chartAutoRefresh==='ON')*(Math.random()+items.UI_Refresh_Timer.state) +
(chartAutoRefresh==='OFF')*Math.random()
slots:
default:
- component: oh-chart
config:
label: Outside Temperature
period: h
slots:
grid:
- component: oh-chart-grid
config: {}
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
scale: true
series:
- component: oh-time-series
config:
name: Temperature
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
item: Buiten_temperatuur
animation: false
A new switch item ‘chartAutoRefresh’ is needed for this. In the page where the widget is used, a toggle card is added:
1 Like