Customer Widgets - Chart Sizes and oh-data-series

Setup, Configuration and Use Widgets
1

openHAB 4.3.3

I am able to create successfully customer widgets with oh-data-series but what I would like to do is include these in a custom widget along with other text data. this works with oh-chart but i cannot seem to control the size of the charts or add pointers and also with oh-chart i cannot seem to get the pointer to work.

PS excuse all the test data/properties with x (this is done for testing)in this widget

if I add the oh-data-series the chart does not display and there is nothing that appears in the web- inspector

for the first chart - I cannot control the size (i would like it to be about 1/3 of the current size(see picture 1) i can get the second chart to display as needed by using the oh-chart

so my questions are:
for -oh-chart
can I control the size of the chart
can i add a pointer
Can I add oh-data-series and then why does it disappear as in Picture 1

thanks

Picture 1

image
image1230×762 35.4 KB

Picture 2

image
image1096×632 44.5 KB

uid: hasG-Cell-Perf-beta
tags:
  - Version 1.4
  - has
props:
  parameters:
    - context: item
      description: The SOC for the Battery
      name: SOC
      required: false
      type: TEXT
    - context: item
      description: The Current for the Battery
      name: Amps
      required: false
      type: TEXT
    - context: item
      description: The item for the Min Cell Voltage
      name: minCellVoltage
      required: false
      type: TEXT
    - context: item
      description: The item for the Max Cell Voltage
      name: maxCellVoltage
      required: false
      type: TEXT
    - default: G-Cell Lithium Performance
      description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - default: battery_100
      description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - default: orange
      description: rgba or HEX
      label: Max Color
      name: maxColor
      required: false
      type: TEXT
    - default: blue
      description: rgba or HEX
      label: Minimum Color
      name: minColor
      required: false
      type: TEXT
    - default: black
      description: rgba or HEX
      label: Default Color
      name: default
      required: false
      type: TEXT
    - context: item
      description: Item to control on/off
      label: Item
      name: item_schalter
      required: false
      type: TEXT
    - context: item
      description: Item to control brightness
      label: Item
      name: item_brightness
      required: false
      type: TEXT
    - default: -___-
      description: Default Cell
      label: Default Cell Text
      name: defaultCellText
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 26, 2025, 3:46:36 PM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : 'var(--f7-card-bg-color)'"
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.5)
    border-radius: 15px
    borderColor: black
    min-width: 390px
    padding: var(--f7-card-content-padding-horizontal)
      var(--f7-card-content-padding-vertical)
      var(--f7-card-content-padding-horizontal)
      var(--f7-card-content-padding-vertical)
slots:
  header:
    - component: f7-card-content
      config:
        style:
          display: flex
          flex-direction: row
          padding: 0px
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              style:
                font-size: 12px
                margin-left: 10px
              text: "=props.title ? props.title  : 'Title'"
  content:
    - component: f7-card-content
      config:
        style:
          padding: 0px
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 17px
                font-weight: 600
                padding: 10px 5px 10px 5px
              text: "=props.header ? props.header   : 'Set Props'"
    - component: oh-gauge
      config:
        type: semicircle
        item: =props.SOC
        min: 0
        max: 100
        borderColor: lightgreen
        valueTextColor: green
        borderBgColor: green
        labelText: State of Charge
        borderWidth: 15
        class:
          - height: 10
          - margin-left
          - margin-right
    - component: oh-data-series
      config:
        text: test
        type: semicircle
        value: 25
        item-style:
          color: pink
        detail:
          name: my value
        min: -50 
  footer:
    - component: f7-card-content
      config:
        style:
          background-colorx: green
          padding: 0px 10px 0px 10px
      slots:
        default:
          - component: f7-row
            config:
              style:
                backgroundColor: lightgrey
                margin-top: 0%
            slots:
              default:
                - component: Label
                  config:
                    style:
                      background: =items.solarLithium01_lithium01_maxCellV_id.state !=== '1 ::1 ' ?
                        rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusX: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::1 ' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1 ::1
                        '?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::1 ' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::1 ' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::2 ' ? rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusX: var(--f7-card-expandable-border-radius)
                      border-radiusx: 5px
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::2 ' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1 ::2
                        '?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      positionx: absolute
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::2 ' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::2 ' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::3 ' ? rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusx: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::3 ' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1 ::3
                        '?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::3 ' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::3 ' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::4 ' ? rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusX: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::4 ' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1 ::4
                        '?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::4 ' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::4 ' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::5 ' ? rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusX: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::5 ' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1 ::5
                        '?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::5 ' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::5 ' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::6 ' ? rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusx: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::6 ' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1 ::6
                        '?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::6 ' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::6 ' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::7 ' ? rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusX: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::7 ' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1 ::7
                        '?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::7 ' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::7 ' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::8 ' ? 'rgba(48,157,190,70%)'
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusX: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::8 ' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1 ::8
                        '?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@@[props.maxCellVoltage+'_id'] == '1 ::8 ' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::8 ' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
          - component: f7-row
            config:
              style:
                backgroundColor: lightgrey
                margin-top: 1%
            slots:
              default:
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::9 ' ? rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusX: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::9 ' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1 ::9
                        '?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::9 ' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::9 ' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::10' ? rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusX: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::10' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1
                        ::10'?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::10' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::10' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::11' ? rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusX: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::11' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1
                        ::11'?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::11' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::11' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::12' ? rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusX: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::12' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1
                        ::12'?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: left
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::12' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::12' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::13' ? rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusX: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::13' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1
                        ::13'?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::13' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::13' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::14' ? rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusX: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::14' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1
                        ::14'?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::14' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::14' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::15' ? rgba(48,157,190,70%)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-radiusX: var(--f7-card-expandable-border-radius)
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::15' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1
                        ::15'?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::15' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::15' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
                - component: Label
                  config:
                    style:
                      background: =@[props.maxCellVoltage+'_id'] == '1 ::16' ? rgba(48,157,190,70%)
                      bborder-radiusX: var(--f7-card-expandable-border-radius)
                      border: solid
                      border-color: black
                      border-radius: 5px
                      border-width: 2px
                      color: "=@[props.minCellVoltage+'_id'] == '1 ::16' ? props.minColor :
                        @[props.maxCellVoltage+'_id'] == '1
                        ::16'?  props.maxColor : props.defaultColor"
                      font-size: 17px
                      text-align: middle
                    text: "=@[props.maxCellVoltage+'_id'] == '1 ::16' ? @[props.maxCellVoltage] :
                      @[props.minCellVoltage+'_id'] == '1 ::16' ?
                      @[props.minCellVoltage]  : props.defaultCellText"
2

Yes. The oh-chart component accepts a style object which allows you to set the css properties for sizing/positioning the chart however you wish:

- component: oh-chart
  config:
    options:
      chart options here...
    style:
      height: css size value here
      width: css size value here

Yes. Nearly all of the eCharts options can be added via the widget configuration:

You just need to understand what kind of pointer you are adding because that will determine which set of options (e.g., chart options, or series config) you define the pointer under.

Yes, but a data-series by itself doesn’t do anything. It is only meaningful as the child in the series slot of an oh-chart

- component: oh-chart
  config:
    full chart configuration...
  slots:
    series:
      - component: oh-data-series
        config:
          full data-series config
3

Hi @JustinG

Thanks for the guidance,

On the first one I had tried height but strangely not added width and there appears a relationship between the height and width that I will need to figure out (will post back after more discovery)

on the second one I was not looking at th relation ship between chart and series (in reality its in the name chart series as you pointed out)

I now have the second chart displaying but again a few issues arise that needs more attention , background to large and comes from the echarts side itself as apposed to oh-gauge is handling and it does now display and work.
as the second part now works I may take a different route than intended on the 3 charts I was wanting to two (I may combine them into 3 graphs something like the echarts car which is part of my original direction in branching into the oh-data-series)

the first thing will be resolving the background on the which i have soled in a different widget but need to find it and remember.

These issues all need more discovery and testing and I will revert later with where I am for reference