Apex Charts radial bar graph

I am trying to create a gauge using ApexCharts' radial bar. However, I am currently having trouble with the color changing property. I do have a property binding to the colors property under options. But every time the gauge changes color it refreshes itself and reanimates going from 0 to the current value. Is there a way I could prevent this so that the animation remains smooth?

Show us how it is set up. Please see Wiki - how to post code on this forum.

Here is the code for the gauge

[
  {
    "type": "kyvislabs.display.apexchart",
    "version": 0,
    "props": {
      "type": "radialBar",
      "options": {
        "chart": {
          "sparkline": {
            "enabled": true
          },
          "type": "radialBar"
        },
        "colors": [
          null
        ],
        "fill": {
          "type": "solid"
        },
        "grid": {
          "padding": {
            "top": -10
          }
        },
        "labels": [
          "value"
        ],
        "plotOptions": {
          "radialBar": {
            "dataLabels": {
              "name": {
                "show": false
              },
              "total": {
                "color": "#00FF00"
              },
              "value": {
                "color": "#fff",
                "fontSize": "22px",
                "offsetY": -2,
                "show": false
              }
            },
            "endAngle": 135,
            "startAngle": -135,
            "track": {
              "background": "#434343",
              "dropShadow": {
                "blur": 0,
                "color": "#000",
                "enabled": true,
                "left": 0,
                "opacity": 0.5,
                "top": 2
              },
              "margin": 5,
              "strokeWidth": "97%"
            }
          }
        },
        "stroke": {
          "lineCap": "round"
        }
      },
      "series": [
        null
      ]
    },
    "meta": {
      "name": "Green-apexchart"
    },
    "position": {
      "height": 1,
      "width": 1
    },
    "custom": {
      "colors": [
        "#00FF00",
        "#FFFF00",
        "#FF0000"
      ]
    },
    "propConfig": {
      "props.options.colors[0]": {
        "binding": {
          "type": "expr-struct",
          "config": {
            "struct": {
              "color": "{this.custom.colors}",
              "curr_val": "{this.props.series[0]}"
            },
            "waitOnAll": true
          },
          "transforms": [
            {
              "code": "\tval = value[\"curr_val\"]\n\t\n\tif val < 55:\n\t\treturn value[\"color\"][0]\n\telif val >= 55 and val < 80:\n\t\treturn value[\"color\"][1]\n\telse:\n\t\treturn value[\"color\"][2]",
              "type": "script"
            }
          ]
        }
      },
      "props.series[0]": {
        "binding": {
          "config": {
            "fallbackDelay": 2.5,
            "mode": "indirect",
            "references": {
              "tag_path": "{view.params.tag_path}"
            },
            "tagPath": "{tag_path}"
          },
          "transforms": [
            {
              "expression": "({value}/{view.params.max}) * 100",
              "type": "expression"
            }
          ],
          "type": "tag"
        }
      }
    }
  }
]

It looks like you've created a self-referencing binding. That would be a no-no!

Would that be a problem if they have different paths? Since one is in props and the other in custom?

You're correct. That shouldn't be a problem.
Thinking hat on again...

The hat didn't help. I haven't used that component. You'll need to wait for better help. I'll delete the incorrect post.

No problem, thank you for your time

Never mind, I found a little work around for it. To prevent an Apex Charts gauge in Ignition from resetting after every color change, you write a function inside of color array index 0

function ({value, w}) {if (w.config.series[0] < 55) {return "#00FF00"} else if (w.config.series[0] >= 55 && w.config.series[0] < 80) {return "#FFFF00"} else {return "#FF0000"}}