Any Nice Looking Gauge Widgets Around?

Hi,
I’m trying to find some nice looking gauges to use for my home power monitor widget, but I’m struggling to find anything.
All I’ve found so far is [Main UI] echarts gauge and pie POC which has some nice looking gauges at the start, but they don’t work for me (I get a blank widget :frowning: )
I love these:
image
However, The code that goes with it just gives a blank widget (either copying directly - using my values for the items - or modifying).

Created widget (copied from page):

uid: test_gauge
tags: []
props:
  parameters:
    - context: item
      description: The value to show
      label: Item
      name: item
      required: true
      type: TEXT
    - context: item
      description: The min value in range
      label: MinItem
      name: minItem
      required: true
      type: TEXT
    - context: item
      description: The max value in range
      label: MaxItem
      name: maxItem
      required: true
      type: TEXT
    - context: number
      description: Min value
      label: Min
      name: min
      required: false
      type: TEXT
    - context: number
      description: Max value
      label: Max
      name: max
      required: false
      type: TEXT
    - context: string
      description: The name to display
      label: Name
      name: name
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 20, 2021, 9:16:11 PM
component: f7-block
config:
  class:
    - no-padding
slots:
  default:
    - component: oh-chart
      slots:
        series:
          - component: oh-serie
            config:
              type: gauge
              radius: 95x%
              axisLine:
                lineStyle:
                  color:
                    - - 1
                      - "#fefefe"
                  width: 12
                  shadowBlur: 5
              startAngle: -90
              endAngle: -89.9999
              axisLabel:
                formatter: " "
              splitNumber: -1
              detail:
                formatter: " "
          - component: oh-serie
            config:
              type: gauge
              min: =props.min || 0
              max: =props.max || 100
              data:
                - value: =items[props.item].state.split(" ")[0]
                  name: =props.name
              splitNumber: 6
              radius: 85%
              pointer:
                length: 84%
              title:
                color: "#000"
                fontSize: 16
              axisLine:
                lineStyle:
                  color:
                    - - =(items[props.minItem].state.split(" ")[0] - props.min - 0.01)/(props.max - props.min)
                      - "#1e90ff"
                    - - =(items[props.maxItem].state.split(" ")[0] - props.min - 0.01)/(props.max - props.min)
                      - lime
                    - - 1
                      - "#ff4500"
                  width: 18
              splitLine:
                length: 18
                lineStyle:
                  color: "#000"
              axisTick:
                length: 10
                lineStyle:
                  color: "#000"
              axisLabel:
                distance: 8
                fontSize: 18
                color: "#000"
              detail:
                backgroundColor: rgb(137,150,96)
                borderWidth: 1
                borderColor: "#000"
                fontSize: 18
                fontFace: Bold
                color: "#000"
                fontFamily: Courier New

Called widget from a test widget:

uid: testinggauge
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 20, 2021, 9:21:16 PM
component: f7-card
config: {}
slots:
  default:
    - component: widget:test_gauge
      config:
        item: 30
        minItem: 5
        maxItem: 55
        min: 0
        max: 70
        name: Test

Preview in both widgets are blank - as is the widget when I place it on a page.
I’m guessing I’ve missed something out - like importing some external library perhaps?

Does anyone have any “nice” gauges out there that work in OH3 UI widgets?

Thanks,
Richie

Please note syntax changed a bit between creating POC and when it got merged … long story short, some elements got renamed making widget within initial post obsolete …

Below is a (non optimised) yaml I use for displaying HP’s info:

uid: widget_gauge
tags: []
props:
  parameters:
    - context: item
      description: The current value
      label: Item
      name: item
      required: true
      type: TEXT
    - context: item
      description: The target value
      label: Target
      name: target
      required: false
      type: TEXT
    - context: item
      description: The min range
      label: MinItem
      name: minItem
      required: false
      type: TEXT
    - context: item
      description: The max range
      label: MaxItem
      name: maxItem
      required: false
      type: TEXT
    - context: number
      description: The min value
      label: Min
      name: min
      required: false
      type: TEXT
    - context: number
      description: The max value
      label: Max
      name: max
      required: false
      type: TEXT
    - context: string
      description: The name
      label: Name
      name: name
      required: false
      type: TEXT
    - context: number
      description: The height of widget
      label: Height
      name: height
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jun 9, 2021, 2:26:32 PM
component: oh-chart
config:
  height: =props.height
slots:
  series:
    - component: oh-data-series
      config:
        radius: 92%
        type: gauge
        startAngle: 90
        endAngle: -270
        axisLine:
          lineStyle:
            width: 10
            color:
              - - 1
                - "#fff"
            shadowColor: rgba(0, 0, 0, 0.5)
            shadowBlur: 10
        axisTick:
          show: false
        splitLine:
          show: false
        axisLabel:
          show: false
        pointer:
          show: false
        title:
          show: false
        anchor:
          show: true
          size: 20
          itemStyle:
            color: "#000"
    - component: oh-data-series
      config:
        radius: 82%
        splitNumber: 6
        type: gauge
        min: =props.min || 0
        max: =props.max || 100
        data:
          - value: =Number.parseFloat(items[props.target].state)
            name: =props.name
        axisLine:
          show: false
        axisTick:
          show: false
        splitLine:
          show: false
        axisLabel:
          show: false
        pointer:
          show: =items[props.target].state !== "-"
          length: 80%
        title:
          offsetCenter:
            - 0
            - -35%
        detail:
          show: false
    - component: oh-data-series
      config:
        radius: 82%
        splitNumber: 6
        type: gauge
        min: =props.min || 0
        max: =props.max || 100
        data:
          - value: =Number.parseFloat(items[props.item].state)
            name: =props.name
        axisLine:
          lineStyle:
            width: 10
            color:
              - - =(Number.parseFloat(items[props.minItem].state) - props.min)/(props.max - props.min)
                - "#58D9F9"
              - - =(Number.parseFloat(items[props.maxItem].state) - props.min)/(props.max - props.min)
                - "#7CFFB2"
              - - 1
                - "#FF6E76"
        axisTick:
          distance: -10
          length: 10
        splitLine:
          distance: -10
          length: 20
        axisLabel:
          distance: 18
          fontSize: 18
        detail:
          valueAnimation: true
          formatter: ="{value}" + "\n" + items[props.item].state.split(" ")[1]
          fontSize: 18
          offsetCenter:
            - 0
            - 45%
        title:
          offsetCenter:
            - 0
            - -35%
        pointer:
          offsetCenter:
            - 0
            - 10%
          icon: path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z
          length: 100%
          itemStyle:
            color: "#f00"
        anchor:
          show: true
          size: 14
          itemStyle:
            borderColor: "#000"
            borderWidth: 2

usage 1:

- component: widget:widget_gauge
  config:
    height: 250px
    item: gBasement_BoilerRoom_HP_RAD_Return
    max: 50
    maxItem: gBasement_BoilerRoom_HP_RAD_MaximalRadiatorReturn
    min: 20
    minItem: gBasement_BoilerRoom_HP_RAD_MinimalRadiatorReturn
    name: RETURN

renders

Screenshot 2021-12-20 at 22.55.58

usage 2:

- component: widget:widget_gauge
  config:
    height: 250px
    item: gBasement_BoilerRoom_HP_RAD_Forward
    max: 50
    min: 20
    name: FORWARD
    target: gBasement_BoilerRoom_HP_RAD_ForwardTarget

renders

Hope this might help …

Hi,
Well, some progress. I don’t get a blank widget anymore:
image

I’m using your widget_gauge code unchanged and Usage 1 modified as below:

                      - component: widget:widget_gauge
                        config:
                          height: 250px
                          item: AUTOHOUSEPOWER_Power
                          minItem: 500
                          maxItem: 3000
                          max: 5000
                          min: 0
                          name: Power

I’m presuming I need to edit something in the widget_gauge, but not sure what :frowning:
Could it be my version of OpenHAB?
openHAB 3.2.0
Build #2595

EDIT:
Not version, updated to below with same issue:
openHAB 3.3.0
Build #2652

Thanks,
Richie

it’s not version related imho, my widget is “optimized” for ranges 0-100, for larger ranges you will need to adjust number of ticks, i’m not behind a computer right now, can share more details a bit later …

Hi Richie

You have to change the Yaml in the widtget_gauge.

change the splitNumber in the oh-data-series

    - component: oh-data-series
      config:
        radius: 82%
        splitNumber: 10

and the fontSize in the axisLabel

        axisLabel:
          distance: 18
          fontSize: 12

it should render
Unbenannt

For the minItem and the maxItem i use a dummy Item for each with the value stored.

Roli

or set range to be i.e. 0 … 50 having something like … Please share your data range and any other details you would like to render within gauge …

Please check Examples - Apache ECharts for ideas …

or kW (assuming the unit) …

Hi,
I think I understand the basics of it now:
image

Thanks for your help - very much appreciated.

Richie

Hi,
Made some progress, but currently unable to remove the background colour of the gauge:


I’ve tried poking around in the developer tools (F12), but can’t work out exactly which section handles this.
Any ideas?

Thanks,
Richie

Hi,
Although I’d spent ages looking and finding nothing, as soon as I posted above, I found the solution.
Add the following to the oh-chart config:

    options:
      backgroundColor: transparent

Thanks,
Richie

Do you mind sharing your final widget code?

Hi,

I try to make a clasic clock like the example
and i get

uid: classic_klok
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 16, 2022, 10:06:39 PM
component: oh-chart
config:
  height: 100%
slots:
  series:
    - component: oh-data-series
      config:
        name: hour
        type: gauge
        startAngle: 90
        endAngle: -270
        min: 0
        max: 12
        splitNumber: 12
        clockwise: true
        axisLine:
          lineStyle:
            width: 15
            color:
              - - 1
                - rgba(0,0,0,0.7)
            shadowColor: rgba(0, 0, 0, 0.5)
            shadowBlur: 20
            show: true
            roundCap: false
        splitLine:
          lineStyle:
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 3
            shadowOffsetX: 1
            shadowOffsetY: 2
            show: true
            width: 3
            distance: 10
        axisLabel:
          fontSize: 30
          distance: 25
          show: true
          color: "#464646"
        anchor:
          show: true
          icon: path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z
          showAbove: false
          offsetCenter:
            - 0
            - -35%
          size: 120
          keepAspect: true
          itemStyle:
            color: "#707177"
            borderWidth: 0
            borderColor: "#5470c6"
        pointer:
          icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
          width: 12
          length: 55%
          offsetCenter:
            - 0
            - 8%
          itemStyle:
            color: "#C0911F"
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 8
            shadowOffsetX: 2
            shadowOffsetY: 4
            show: true
            showAbove: true
            keepAspecy: false
        detail:
          show: false
          backgroundColor: rgba(0,0,0,0)
          borderWidth: 0
          borderColor: "#ccc"
          padding:
            - 5
            - 10
        title:
          offsetCenter:
            - 0
            - 30%
        data:
          value: 2
          z: 2
    - component: oh-data-series
      config:
        name: minute
        type: gauge
        startAngle: 90
        endAngle: -270
        min: 0
        max: 60
        clockwise: true
        axisLine:
          show: false
        splitLine:
          show: false
        axisTick:
          show: false
        axisLabel:
          show: false
        pointer:
          icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
          width: 8
          length: 70%
          offsetCenter:
            - 0
            - 8%
          itemStyle:
            color: "#C0911F"
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 8
            shadowOffsetX: 2
            shadowOffsetY: 4
          anchor:
            show: true
            size: 20
            showAbove: false
            itemStyle:
              borderWidth: 15
              borderColor: "#C0911F"
              shadowColor: rgba(0, 0, 0, 0.3)
              shadowBlur: 8
              shadowOffsetX: 2
              shadowOffsetY: 4
          detail:
            show: false
          title:
            offsetCenter:
              - 0%
              - -40%
          data:
            value: 25
    - component: oh-data-series
      config:
        name: second
        type: gauge
        startAngle: 90
        endAngle: -270
        min: 0
        max: 60
        animationEasingUpdate: bounceOut
        clockwise: true
        axisLine:
          show: false
        splitLine:
          show: false
        axisTick:
          show: false
        axisLabel:
          show: false
        pointer:
          icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
          width: 4
          length: 85%
          offsetCenter:
            - 0
            - 8%
          itemStyle:
            color: "#C0911F"
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 8
            shadowOffsetX: 2
            shadowOffsetY: 4
          anchor:
            show: true
            size: 15
            showAbove: true
            itemStyle:
              color: "#C0911F"
              shadowColor: rgba(0, 0, 0, 0.3)
              shadowBlur: 8
              shadowOffsetX: 2
              shadowOffsetY: 4
          detail:
            show: false
          title:
            offsetCenter:
              - 0%
              - -40%
          data:
            value: 20

some one any idea why the pointers are not visible and the 0 is shown ?

using : openHAB 3.3.0
Build #2795

Hi Ronny

The 0 is shown because there is something missing in the axisLabel

      axisLabel: {
        fontSize: 50,
        distance: 25,
        formatter: function (value) {
          if (value === 0) {
            return '';
          }
          return value + '';
        }
      },

but i could not find the correct syntax .

The Pointers are not shown becaus you miss the name in the data part.
and you had also some alignement bugs.

here the code

uid: test
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 17, 2022, 10:03:50 PM
component: oh-chart
config:
  height: 100%
slots:
  series:
    - component: oh-data-series
      config:
        name: hour
        type: gauge
        startAngle: 90
        endAngle: -270
        min: 0
        max: 12
        splitNumber: 12
        clockwise: true
        axisLine:
          lineStyle:
            width: 15
            color:
              - - 1
                - rgba(0,0,0,0.7)
            shadowColor: rgba(0, 0, 0, 0.5)
            shadowBlur: 20
          show: true
        splitLine:
          lineStyle:
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 3
            shadowOffsetX: 1
            shadowOffsetY: 2
            width: 3
          distance: 10
          show: true
        axisLabel:
          fontSize: 30
          distance: 25
          show: true
          color: "#464646"
        anchor:
          show: true
          icon: path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z
          showAbove: false
          offsetCenter:
            - 0
            - -35%
          size: 120
          keepAspect: true
          itemStyle:
            color: "#707177"
            borderWidth: 0
            borderColor: "#5470c6"
        pointer:
          icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
          itemStyle:
            color: "#C0911F"
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 8
            shadowOffsetX: 2
            shadowOffsetY: 4
          width: 12
          length: 55%
          offsetCenter:
            - 0
            - 8%
        detail:
          show: false
          backgroundColor: rgba(0,0,0,0)
          borderWidth: 0
          borderColor: "#ccc"
          valueAnimation: true
        title:
          show: false
          offsetCenter:
            - 0
            - 30%
        data:
          - name: hour
            value: 2
    - component: oh-data-series
      config:
        name: minute
        type: gauge
        startAngle: 90
        endAngle: -270
        min: 0
        max: 60
        clockwise: true
        axisLine:
          show: false
        splitLine:
          show: false
        axisTick:
          show: false
        axisLabel:
          show: false
        pointer:
          icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
          width: 8
          length: 70%
          offsetCenter:
            - 0
            - 8%
          itemStyle:
            color: "#C0911F"
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 8
            shadowOffsetX: 2
            shadowOffsetY: 4
        anchor:
          show: true
          size: 20
          showAbove: false
          itemStyle:
            borderWidth: 15
            borderColor: "#C0911F"
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 8
            shadowOffsetX: 2
            shadowOffsetY: 4
        detail:
          show: false
        title:
          show: false
          offsetCenter:
            - 0%
            - -40%
        data:
          - name: minute
            value: 25
    - component: oh-data-series
      config:
        name: second
        type: gauge
        startAngle: 90
        endAngle: -270
        min: 0
        max: 60
        animationEasingUpdate: bounceOut
        clockwise: true
        axisLine:
          show: false
        splitLine:
          show: false
        axisTick:
          show: false
        axisLabel:
          show: false
        pointer:
          icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
          width: 4
          length: 85%
          offsetCenter:
            - 0
            - 8%
          itemStyle:
            color: "#C0911F"
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 8
            shadowOffsetX: 2
            shadowOffsetY: 4
        anchor:
          show: true
          size: 15
          showAbove: true
          itemStyle:
            color: "#C0911F"
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 8
            shadowOffsetX: 2
            shadowOffsetY: 4
        detail:
          show: false
        title:
          show: false
          offsetCenter:
            - 0%
            - -40%
        data:
          - name: second
            value: 20

Hi,
Thanks for the correction.
Only the widget is not displayed when used

I guess the UI doesn’t like the heigt in

component: oh-chart
config:
  height: 100%

I corrected that and adjusted the parameters

uid: test
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 18, 2022, 8:11:01 AM
component: oh-chart
config:
  options:
    backgroundColor: transparent
slots:
  series:
    - component: oh-data-series
      config:
        name: hour
        type: gauge
        startAngle: 90
        endAngle: -270
        min: 0
        max: 12
        splitNumber: 12
        clockwise: true
        axisLine:
          lineStyle:
            width: 8
            color:
              - - 1
                - rgba(0,0,0,0.7)
            shadowColor: rgba(0, 0, 0, 0.5)
            shadowBlur: 20
          show: true
        splitLine:
          lineStyle:
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 3
            shadowOffsetX: 1
            shadowOffsetY: 2
            width: 3
          distance: 5
          show: true
        axisLabel:
          fontSize: 20
          distance: 15
          show: true
          color: "#464646"
        anchor:
          show: true
          icon: path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z
          showAbove: false
          offsetCenter:
            - 0
            - -35%
          size: 50
          keepAspect: true
          itemStyle:
            color: "#707177"
            borderWidth: 0
            borderColor: "#5470c6"
        pointer:
          icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
          itemStyle:
            color: "#C0911F"
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 8
            shadowOffsetX: 2
            shadowOffsetY: 4
          width: 6
          length: 50%
          offsetCenter:
            - 0
            - 8%
        detail:
          show: false
          backgroundColor: rgba(0,0,0,0)
          borderWidth: 0
          borderColor: "#ccc"
          valueAnimation: true
        title:
          show: false
          offsetCenter:
            - 0
            - 30%
        data:
          - name: hour
            value: =dayjs().format('hh')
    - component: oh-data-series
      config:
        name: minute
        type: gauge
        startAngle: 90
        endAngle: -270
        min: 0
        max: 60
        clockwise: true
        axisLine:
          show: false
        splitLine:
          show: false
        axisTick:
          show: false
        axisLabel:
          show: false
        pointer:
          icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
          width: 5
          length: 70%
          offsetCenter:
            - 0
            - 8%
          itemStyle:
            color: "#C0911F"
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 8
            shadowOffsetX: 2
            shadowOffsetY: 4
        anchor:
          show: true
          size: 7
          showAbove: false
          itemStyle:
            borderWidth: 15
            borderColor: "#C0911F"
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 8
            shadowOffsetX: 2
            shadowOffsetY: 4
        detail:
          show: false
        title:
          show: false
          offsetCenter:
            - 0%
            - -40%
        data:
          - name: minute
            value: =dayjs().format('mm')
    - component: oh-data-series
      config:
        name: second
        type: gauge
        startAngle: 90
        endAngle: -270
        min: 0
        max: 60
        animationEasingUpdate: bounceOut
        clockwise: true
        axisLine:
          show: false
        splitLine:
          show: false
        axisTick:
          show: false
        axisLabel:
          show: false
        pointer:
          icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
          width: 3
          length: 85%
          offsetCenter:
            - 0
            - 8%
          itemStyle:
            color: "#C0911F"
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 8
            shadowOffsetX: 2
            shadowOffsetY: 4
        anchor:
          show: true
          size: 10
          showAbove: true
          itemStyle:
            color: "#C0911F"
            shadowColor: rgba(0, 0, 0, 0.3)
            shadowBlur: 8
            shadowOffsetX: 2
            shadowOffsetY: 4
        detail:
          show: false
        title:
          show: false
          offsetCenter:
            - 0%
            - -40%
        data:
          - name: second
            value: =dayjs().format('s')

for the correct time i used dayjs, but i didnt get the automation to work.

For the automation the last part from the echarts example needs to get attached to the widget, but i don’t know how to accomplish this.

setInterval(function () {
  var date = new Date();
  var second = date.getSeconds();
  var minute = date.getMinutes() + second / 60;
  var hour = (date.getHours() % 12) + minute / 60;
  option.animationDurationUpdate = 300;
  myChart.setOption({
    series: [
      {
        name: 'hour',
        animation: hour !== 0,
        data: [{ value: hour }]
      },
      {
        name: 'minute',
        animation: minute !== 0,
        data: [{ value: minute }]
      },
      {
        animation: second !== 0,
        name: 'second',
        data: [{ value: second }]
      }
    ]
  });
}, 1000);

AFAIK attaching js code is not (currently) supported, so both

formatter: function (value) {
...

and

setInterval(function () {
...

is a no-go. You might get away with formatter using “string” syntax, like:

formatter: '{value} km/h',

but I guess it does not solve your problem having 0 overlapping 12 …

Maybe you could use script(s) to update item(s) when needed and use that instead of attaching js code within widget (yaml) …

Hello,
i created a new gauge and have a abnormal result.
In the editor it look ok, when using it the gauge dont stop on the max value

Editor :

Widget in use :

uid: sun_moon
tags:
  - sun
  - moon
props:
  parameters:
    - context: item
      description: Sun Total Radiation
      label: Sun Total Radiation
      name: total
      required: true
      type: TEXT
    - context: item
      description: Sun Direct Radiaton
      label: Sun Direct Radiaton
      name: direct
      required: false
      type: TEXT
    - context: item
      description: Sun Diffuse Radiaton
      label: Sun Diffuse Radiaton
      name: diffuse
      required: false
      type: TEXT
    - context: item
      description: Moon Azimuth
      label: Moon Azimuth
      name: azimuthmoon
      required: false
      type: TEXT
    - context: item
      description: Sun Azimuth
      label: Sun Azimuth
      name: azimuth
      required: false
      type: TEXT
    - context: number
      description: Min Azimuth
      label: Min Azimuth range
      name: minazimuth
      required: false
      type: TEXT
    - context: number
      description: Max Azimuth
      label: Max Azimuth range
      name: maxazimuth
      required: false
      type: TEXT
    - context: item
      description: The min range
      label: MinItem
      name: minItem
      required: false
      type: TEXT
    - context: item
      description: The max range
      label: MaxItem
      name: maxItem
      required: false
      type: TEXT
    - context: number
      description: The min value
      label: Min
      name: min
      required: false
      type: TEXT
    - context: number
      description: The total max value
      label: Max total
      name: maxtotal
      required: false
      type: TEXT
    - context: number
      description: The direct max value
      label: Max direct
      name: maxdirect
      required: false
      type: TEXT
    - context: number
      description: The diffuse max value
      label: Max diffuse
      name: maxdiffuse
      required: false
      type: TEXT
    - context: string
      description: The name
      label: Name
      name: name
      required: false
      type: TEXT
    - context: number
      description: The height of widget
      label: Height
      name: height
      required: false
      type: TEXT
    - context: number
      description: Scale division
      label: Splits
      name: splits
      required: true
      type: TEXT
  parameterGroups: []
timestamp: May 7, 2022, 10:31:23 AM
component: oh-chart
config:
  height: =props.height
slots:
  series:
    - component: oh-data-series
      config:
        radius: 70%
        type: gauge
        startAngle: 0
        endAngle: 0
        axisLine:
          lineStyle:
            width: 10
            color:
              - - 1
                - "#fff"
            shadowColor: rgba(0, 0, 0, 0.8)
            shadowBlur: 15
        axisTick:
          show: false
        splitLine:
          show: false
        axisLabel:
          show: false
        pointer:
          show: false
        title:
          show: false
        anchor:
          show: false
          size: 20
          itemStyle:
            color: "#000"
    - component: oh-data-series
      config:
        radius: 100%
        splitNumber: =props.splits || 10
        type: gauge
        min: =props.min || 0
        max: =props.maxdirect || 100
        startAngle: 230
        endAngle: 75
        center:
          - 50%
          - 70%
        data:
          - value: =Number.parseFloat(items[props.direct].displayState) || 0
            name: direct radiaton
        axisLine:
          show: false
          color: rgba(0, 240, 240, 0.8)
          shadowColor: rgba(0, 0, 0, 0.8)
          shadowBlur: 15
        axisTick:
          show: false
          distance: -10
          length: 10
          color: "#0FF"
          width: 1
        splitLine:
          show: false
          distance: -10
          length: 15
          width: 1
          color: "#0FF"
        axisLabel:
          show: false
          distance: 18
          fontSize: 12
        pointer:
          show: false
          offsetCenter:
            - 0
            - -95%
          icon: path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z
          length: 10%
          itemStyle:
            color: "#5F5"
        title:
          offsetCenter:
            - 0
            - 30%
          fontSize: 10
          color: "#F0F"
        detail:
          valueAnimation: true
          formatter: ="{value}" + " " + items[props.direct].state.split(" ")[1]
          show: true
          fontSize: 12
          color: "#F0F"
    - component: oh-data-series
      config:
        radius: 100%
        splitNumber: =props.splits || 10
        type: gauge
        min: =props.min || 0
        max: =props.maxdiffuse || 100
        startAngle: 90
        endAngle: 0
        center:
          - 50%
          - 58%
        data:
          - value: =Number.parseFloat(items[props.diffuse].displayState) || 0
            name: diffuse radiaton
            offsetCenter:
              - 0
              - 40%
        axisLine:
          show: false
        axisTick:
          show: false
          distance: -10
          length: 5
        splitLine:
          show: false
          distance: -10
          length: 10
        axisLabel:
          show: false
          distance: 12
          fontSize: 8
        pointer:
          show: false
          offsetCenter:
            - 0
            - -95%
          icon: path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z
          length: 5%
          itemStyle:
            color: "#F55"
        title:
          offsetCenter:
            - 0
            - 30%
          fontSize: 10
          color: "#F55"
        detail:
          valueAnimation: true
          formatter: ="{value}" + " " + items[props.diffuse].state.split(" ")[1]
          show: true
          fontSize: 12
          color: "#F5F"
    - component: oh-data-series
      config:
        radius: 100%
        splitNumber: =props.splits || 10
        type: gauge
        min: =props.min || 0
        max: =props.maxtotal || 100
        startAngle: 180
        endAngle: 0
        center:
          - 50%
          - 90%
        data:
          - value: =Number.parseFloat(items[props.total].displayState) || 0
            name: total radiaton
            offsetCenter:
              - 0
              - -50%
        axisLine:
          lineStyle:
            width: 10
            color:
              - - =(Number.parseFloat(items[props.minItem].state) - props.min)/(props.max - props.min)
                - "#58D9F9"
              - - =(Number.parseFloat(items[props.maxItem].state) - props.min)/(props.max - props.min)
                - "#7CFFB2"
              - - 1
                - "#FF6E76"
        axisTick:
          distance: -10
          length: 10
        splitLine:
          distance: -10
          length: 20
        axisLabel:
          distance: 18
          fontSize: 12
        detail:
          valueAnimation: true
          formatter: ="{value}" + " " + items[props.total].state.split(" ")[1]
          fontSize: 12
          color: "#04F"
          offsetCenter:
            - 0
            - -50%
        title:
          offsetCenter:
            - 0
            - -60%
          fontSize: 10
          color: "#04F"
        pointer:
          offsetCenter:
            - 0
            - -130
          icon: path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z
          length: 15%
          itemStyle:
            color: "#00F"
        anchor:
          show: false
          size: 14
          itemStyle:
            borderColor: "#fff"
            borderWidth: 1
    - component: oh-data-series
      config:
        radius: 200%
        splitNumber: =props.splits || 10
        type: gauge
        min: =props.minazimuth || 60
        max: =props.maxazimuth || 300
        startAngle: 180
        endAngle: 0
        center:
          - 50%
          - 103%
        data:
          - value: =Number.parseFloat(items[props.azimuth].displayState) || 195
            name: Azimuth
        axisLine:
          show: false
          lineStyle:
            width: 10
            color:
              - - =(Number.parseFloat(items[props.minItem].state) - props.min)/(props.max - props.min)
                - "#58D9F9"
              - - =(Number.parseFloat(items[props.maxItem].state) - props.min)/(props.max - props.min)
                - "#7CFFB2"
              - - 1
                - "#FF6E76"
        axisTick:
          show: false
          distance: -10
          length: 10
        splitLine:
          show: false
          distance: -10
          length: 20
        axisLabel:
          distance: 15
          fontSize: 10
        detail:
          valueAnimation: true
          formatter: ="{value}" +"°"
          fontSize: 12
          color: "#F0F"
          offsetCenter:
            - 0
            - -83%
        title:
          offsetCenter:
            - 0
            - -78%
          fontSize: 10
          color: "#F0F"
        pointer:
          width: 25%
          height: 25%
          offsetCenter:
            - 0
            - -95%
          icon: path://M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z
          length: 10%
          itemStyle:
            color: "#DBB511"
        anchor:
          show: false
          size: 14
          itemStyle:
            borderColor: "#DB8508"
            borderWidth: 1
    - component: oh-data-series
      config:
        radius: 200%
        splitNumber: =props.splits || 10
        type: gauge
        min: =props.minazimuth || 60
        max: =props.maxazimuth || 300
        startAngle: 180
        endAngle: 0
        center:
          - 50%
          - 103%
        data:
          - value: =Number.parseFloat(items[props.azimuthmoon].displayState) || 125
            name: Azimuth
        axisLine:
          show: false
          lineStyle:
            width: 10
            color:
              - - =(Number.parseFloat(items[props.minItem].state) - props.min)/(props.max - props.min)
                - "#58D9F9"
              - - =(Number.parseFloat(items[props.maxItem].state) - props.min)/(props.max - props.min)
                - "#7CFFB2"
              - - 1
                - "#FF6E76"
        axisTick:
          show: false
          distance: -10
          length: 10
        splitLine:
          show: false
          distance: -10
          length: 20
        axisLabel:
          distance: 15
          fontSize: 10
        detail:
          valueAnimation: true
          formatter: ="{value}" +"°"
          fontSize: 12
          color: "#F0F"
          offsetCenter:
            - 0
            - -72%
        title:
          offsetCenter:
            - 0
            - -78%
          fontSize: 10
          color: "#F0F"
        pointer:
          width: 25%
          height: 25%
          offsetCenter:
            - 0
            - -95%
          icon: path://M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z
          length: 10%
          itemStyle:
            color: "#282"
        anchor:
          show: false
          size: 14
          itemStyle:
            borderColor: "#fff"
            borderWidth: 1

any idea how to fix this

Thanks for the support