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"
}
}
}
}
]
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"}}