Widget looking different in design and view

Add-ons UIs
1

I use a Widget for Gauge

uid: Gauge_Target
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: Nov 2, 2022, 10:28:13 PM
component: oh-chart
config:
  height: =props.height
slots:
  series:
    - component: oh-data-series
      config:
        anchor:
          itemStyle:
            color: "#000"
          show: true
          size: 20
        axisLabel:
          show: false
        axisLine:
          lineStyle:
            color:
              - - 1
                - "#fff"
            shadowBlur: 10
            shadowColor: rgba(0, 0, 0, 0.5)
            width: 10
        axisTick:
          show: false
        endAngle: -270
        pointer:
          show: false
        radius: 92%
        splitLine:
          show: false
        startAngle: 90
        title:
          show: false
        type: gauge
    - component: oh-data-series
      config:
        axisLabel:
          show: false
        axisLine:
          show: false
        axisTick:
          show: false
        data:
          - name: =props.name
            value: =Number.parseFloat(items[props.target].state)
        detail:
          show: false
        max: =props.max || 100
        min: =props.min || 0
        pointer:
          length: 80%
          show: =items[props.target].state !== "-"
        radius: 82%
        splitLine:
          show: false
        splitNumber: 7
        title:
          offsetCenter:
            - 0
            - -35%
        type: gauge
    - component: oh-data-series
      config:
        anchor:
          itemStyle:
            borderColor: "#000"
            borderWidth: 2
          show: true
          size: 14
        axisLabel:
          distance: 18
          fontSize: 18
        axisLine:
          lineStyle:
            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"
            width: 10
        axisTick:
          distance: -10
          length: 10
        data:
          - name: =props.name
            value: =Number.parseFloat(items[props.item].state)
        detail:
          fontSize: 18
          formatter: ="{value}" + "\n" + items[props.item].state.split(" ")[1]
          offsetCenter:
            - 0
            - 45%
          valueAnimation: true
        max: =props.max || 100
        min: =props.min || 0
        pointer:
          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
          itemStyle:
            color: "#f00"
          length: 100%
          offsetCenter:
            - 0
            - 10%
        radius: 82%
        splitLine:
          distance: -10
          length: 20
        splitNumber: 7
        title:
          offsetCenter:
            - 0
            - -35%
        type: gauge

When designing the page it looks like this
image
but when viewing the page it looks like this
image
what can be the problem?

2

I was struggling with this the other day, but did not find a solution.
What I found, the second color expression is not working in every case, even I did not find syntax issues. Sometimes it helped to hardcode the value, sometimes not.

3

Is there any way to display Gauges that work or do i need another solution for that?