Bindings Force Animation

[nikolai-wolterstorff]

Ignition Version: 8.1.15 (b2022030114) Kyvis-Labs ApexCharts Version: 1.0.8 (b2022022614)

If there is a custom property that updates on an ApexChart, or on a container with an ApexChart within, it forces the initial load animation on the chart.

View JSON to replicate (put designer in play mode to see this): { "custom": {}, "params": {}, "props": {}, "root": { "children": [ { "children": [ { "meta": { "name": "apexchart" }, "position": { "basis": "200px", "grow": 1 }, "props": { "options": { "chart": { "dropShadow": { "blur": 10, "color": "#000", "enabled": true, "left": 7, "opacity": 0.2, "top": 18 }, "events": { "animationEnd": false, "beforeMount": false, "beforeResetZoom": false, "beforeZoom": false, "brushScrolled": false, "click": false, "dataPointMouseEnter": false, "dataPointMouseLeave": false, "dataPointSelection": false, "legendClick": false, "markerClick": false, "mounted": false, "mouseLeave": false, "mouseMove": false, "scrolled": false, "selection": false, "updated": false, "zoomed": false }, "height": 350, "toolbar": { "show": false }, "type": "line" }, "colors": [ "#77B6EA", "#545454" ], "dataLabels": { "enabled": true }, "grid": { "borderColor": "#e7e7e7", "row": { "colors": [ "#f3f3f3", "transparent" ], "opacity": 0.5 } }, "legend": { "floating": true, "horizontalAlign": "right", "offsetX": -5, "offsetY": -25, "position": "top" }, "markers": { "size": 1 }, "stroke": { "curve": "smooth" }, "title": { "align": "left", "text": "Average High \u0026 Low Temperature" }, "xaxis": { "categories": [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" ], "title": { "text": "Month" } }, "yaxis": { "max": 40, "min": 5, "title": { "text": "Temperature" } } }, "series": [ { "data": [ 28, 29, 33, 36, 32, 32, 33 ], "name": "High - 2013" }, { "data": [ 12, 11, 14, 18, 17, 13, 13 ], "name": "Low - 2013" } ] }, "type": "kyvislabs.display.apexchart" } ], "meta": { "name": "FlexContainer" }, "position": { "basis": "200px", "grow": 1 }, "propConfig": { "custom.now": { "binding": { "config": { "expression": "now(5000)" }, "type": "expr" } } }, "props": { "style": { "overflow": "hidden" } }, "type": "ia.container.flex" }, { "meta": { "name": "apexchart" }, "position": { "basis": "200px", "grow": 1 }, "propConfig": { "custom.now": { "binding": { "config": { "expression": "now(10000)" }, "type": "expr" } } }, "props": { "options": { "chart": { "dropShadow": { "blur": 10, "color": "#000", "enabled": true, "left": 7, "opacity": 0.2, "top": 18 }, "events": { "animationEnd": false, "beforeMount": false, "beforeResetZoom": false, "beforeZoom": false, "brushScrolled": false, "click": false, "dataPointMouseEnter": false, "dataPointMouseLeave": false, "dataPointSelection": false, "legendClick": false, "markerClick": false, "mounted": false, "mouseLeave": false, "mouseMove": false, "scrolled": false, "selection": false, "updated": false, "zoomed": false }, "height": 350, "toolbar": { "show": false }, "type": "line" }, "colors": [ "#77B6EA", "#545454" ], "dataLabels": { "enabled": true }, "grid": { "borderColor": "#e7e7e7", "row": { "colors": [ "#f3f3f3", "transparent" ], "opacity": 0.5 } }, "legend": { "floating": true, "horizontalAlign": "right", "offsetX": -5, "offsetY": -25, "position": "top" }, "markers": { "size": 1 }, "stroke": { "curve": "smooth" }, "title": { "align": "left", "text": "Average High \u0026 Low Temperature" }, "xaxis": { "categories": [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" ], "title": { "text": "Month" } }, "yaxis": { "max": 40, "min": 5, "title": { "text": "Temperature" } } }, "series": [ { "data": [ 28, 29, 33, 36, 32, 32, 33 ], "name": "High - 2013" }, { "data": [ 12, 11, 14, 18, 17, 13, 13 ], "name": "Low - 2013" } ] }, "type": "kyvislabs.display.apexchart" } ], "meta": { "name": "root" }, "props": { "direction": "column", "style": { "overflow": "hidden" } }, "type": "ia.container.flex" } }

[traviscox]

Fixed this issue in 1.0.9:

https://github.com/Kyvis-Labs/ignition-apexcharts-module/releases/tag/1.0.9

Can you verify and close the ticket?

[nikolai-wolterstorff]

Looks great, thanks!