Chart scrollbar

Setup, Configuration and Use Runtime
1

Recently, UI chart pages of mine started opening with a scroll bar that hasn’t been there before.

I noticed after I upgraded 4.2.0 → 4.2.1 but that’s not definitive so might be misleading.

Any idea how to get rid of the bar? I tried removing some values, doesn’t help. Scale of values seems not to affect it either.
oh-chart-grid also does not seem to have a property for it.

2

I haven’t seen this personally, but the chart height calculations have changed. However, it also appears that @florian-h05 has also already patched the scroll bar issue just a few weeks ago, so upgrading to a snapshot should fix the problem.

1 Like
3

I changed the height calculations because with iOS 17.5 (IIRC) charts/analyzer broke on iOS devices.
This however introduced a few regressions, which I fixed — the current snapshot works fine for me on all my devices.

4

Can you please share more details about your setup? What chart, which device etc.

5

Sure:
OH 4.2.1, it’s Firefox on Windoze. 4k resolution.
Scaling is such that it opens a window (and when I scale the main UI page to have larger icons/text, the chart opens to fill the full window, then there’s no scrollbar).
On Android/Firefox the same charts look fine.

It’s all charts with two scales and happens everywhere, but even stripping them down to a single value (= single scale, too) does not make a difference.

Example page:

config:
  label: Batterie
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  legend:
    - component: oh-chart-legend
      config:
        //type: scroll
        bottom: 3
        orient: horizontal
        selected:
          Batterieladung: true
          Netz: true
          SoC: true
          Solarertrag: false
          Strompreis: true
          Verbrauch: true
          günstige Energie: true
        show: true
  series:
    - component: oh-time-series
      config:
        color: red
        gridIndex: 0
        item: Verbrauch
        markLine:
          data:
            - type: average
        name: Verbrauch
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        color: blue
        gridIndex: 0
        item: Netzeinspeisung
        markLine:
          data:
            - type: average
        name: Netz
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        color: darkgreen
        gridIndex: 0
        item: SoCHaus
        name: SoC
        options:
          backgroundColor: transparent
        type: line
        visibility: false
        xAxisIndex: 0
        yAxisIndex: 1
    - component: oh-time-series
      config:
        color: lightblue
        gridIndex: 0
        item: LadeleistungHaus
        name: Batterieladung
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        color: yellow
        gridIndex: 0
        item: ErzeugungsLeistung
        markLine:
          data:
            - type: average
        markPoint:
          data:
            - name: max
              type: max
        name: Solarertrag
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        color: orange
        gridIndex: 0
        item: Energieniveau_normalisiert
        name: günstige Energie
        type: bar
        xAxisIndex: 0
        yAxisIndex: 1
    - component: oh-time-series
      config:
        color: brown
        gridIndex: 0
        item: StrompreisCt
        name: Strompreis
        options:
          backgroundColor: transparent
        type: bar
        xAxisIndex: 0
        yAxisIndex: 1
  tooltip:
    - component: oh-chart-tooltip
      config:
        //valueFormatter: =x=>${x} UoM
        formatter: =x=>${x} UoM
        orient: vertical
        show: true
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: W
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: ct or %
6

Is this page used inside a tabbed page or inside a popup or something like this?

7

yes

                      - component: oh-link
                        config:
                          action: popup
                          actionModal: page:stromRechnung
8

Okay now I can reproduce it as well.

9

I have a fix: Charts: Apply iOS-related fixes only to iOS devices by florian-h05 · Pull Request #2717 · openhab/openhab-webui · GitHub

10

Thanks!
Please label it as patch for 4.2.2, too.

11

Already done :+1:

Off topic: Will you be at FrOSCon in Sankt Augustin this weekend?

12

would have liked to meet you in person but I’m afraid no.

13

Okay, too bad, then maybe another time. Unfortunately, I won’t be at Solingen …

14

on the original question, is there a quick fix like height: in the page to remove the bar?
or will that (without your fix) just be a choice between displaying bar on either PC or iPhone?

15

If you are able to inject a more complex stylesheet through the widget/page YAML, it should be fixable, but I haven’t done that before and don’t know if it’s feasible.
Otherwise, it will be a choice between iOS or non-iOS.

I guess an easier option would be to compile the UI bundle from the 4.2.x branch and deploy it — you can update it without restarting openHAB.

16

Ok, thanks. I’ll take option 3, wait for 4.2.2 that is.

1 Like