Chart as backgroud for label cell?

[e36Alex (Alexander)]

Hello,

is it possible to use a chart (page) as backgroud for a label cell in mainUI?
I would like to use a chart thats a bit more complex than just the trend line.

Thanks in advance,
Alex

[JustinG]

You can. Actually fairly easily. Just create the chart page using the page wizard and then copy the yaml code from the code tab of that chart. That code then goes in an oh-chart component in the background slot of the label card:

component: oh-label-cell
config:
  title: Label Cell
  label: With a chart
  footer: Demo
slots:
  background:
    - component: div
      slots:
        default:
          - component: oh-chart
            ...pasted chart page code goes here

There’s a big caveat here, however. It’s going to take some work to get it to look pretty. The div that I added in the example up there is not strictly necessary, but I suspect you’re going to want it because you’re gong to need to add a bunch of css styling to get the size, position, and look of the chart to work out. For example. I would probably fade the chart out some with:

    - component: div
      config:
        style:
          opacity: .5
      slots:
        default:
          - component: oh-chart
...

[e36Alex (Alexander)]

@JustinG

slots:
  background:
    - component: div
      slots:
        default:
          - component: oh-chart
            ...pasted chart page code goes here

Thank you!