Annotations appear in front of the graph

[SafeScripterWillem]

We are using the Apexchart module version 1.0.16 in combination with Ignition version 8.1.36. With our previous Apexchart module 1.0.9 we had no issues showing annotations. They appeared at the back of the graph. This can be seen in the picture below represented by the blue area.

However with the new Apexchart module 1.0.16 the annotations appear in the front of the graph. This can also been seen in the picture below represented by the blue area.

How can i resolve this problem without using opacity?

[traviscox]

I wasn't able to replicate this issue. Can you post an example of your options and series properties? Here is my options:

{ "chart": { "height": 350, "stacked": false, "toolbar": { "show": true }, "type": "line" }, "dataLabels": { "enabled": false }, "fill": { "opacity": 1 }, "markers": { "size": 0 }, "stroke": { "width": 3 }, "xaxis": { "type": "datetime" }, "yaxis": { "labels": { "formatter": "function (val) { return val.toFixed(2); }" } }, "annotations": { "yaxis": [ { "y": 97, "borderColor": "#00E396", "label": { "borderColor": "#00E396", "style": { "color": "#fff", "background": "#00E396" }, "text": "Y-axis annotation" }, "y2": 99 } ] } }

This gave me the following:

[SafeScripterWillem]

Options properties: { "annotations": { "yaxis": [ { "fillColor": "var(--color-pid-desiredrange)", "borderColor": "var(--color-pid-desiredrange)", "strokeDashArray": 1, "y": 165, "y2": 180 } ] }, "chart": { "animations": { "enabled": false }, "dropShadow": { "blur": 10, "color": "#000", "enabled": false, "left": 7, "opacity": 0.2, "top": 18 }, "events": { "animationEnd": false, "beforeMount": false, "beforeResetZoom": "function () { lastZoom \u003d null; }", "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": "function () {if (lastZoom) { chart.zoomX(lastZoom[0], lastZoom[1]); }}", "zoomed": false }, "toolbar": { "offsetX": -6, "offsetY": 0, "show": true, "tools": { "download": false, "reset": true, "zoom": true, "zoomin": false, "zoomout": false } } }, "colors": [ "var(--color-pid-pv) ", "var(--color-pid-sp)" ], "dataLabels": { "enabled": false }, "grid": { "show": false }, "legend": { "floating": false, "horizontalAlign": "right", "offsetX": -5, "offsetY": -25, "position": "top", "show": false }, "markers": { "size": 0 }, "noData": { "align": "center", "text": "Pas de données", "verticalAlign": "middle" }, "stroke": { "curve": "stepline", "width": 2 }, "subtitle": { "align": "mid", "offsetX": 0, "offsetY": 0, "show": false, "style": { "classes": "pid-AI-sensor", "color": "", "fontFamily": "", "fontSize": 10 }, "text": "Niveau [cm]" }, "title": { "margin": -20, "offsetY": 0, "style": { "color": "#BBBBBB" }, "text": "" }, "tooltip": { "enabled": true, "x": { "format": "ddd dd MMM HH:mm:ss" }, "y": { "title": "" } }, "xaxis": { "axisBorder": { "color": "#757575", "show": true }, "axisTicks": { "color": "#757575", "show": true }, "labels": { "datetimeFormatter": { "day": "dd MMM", "hour": "HH:mm", "month": "MMM \u0027yy", "year": "yyyy" }, "datetimeUTC": false, "format": "HH:mm", "show": true, "style": { "colors": "var(--color-label-4)", "fontSize": "12px", "fontWeight": 400 } }, "title": { "text": "" }, "tooltip": { "enabled": false }, "type": "datetime" }, "yaxis": { "axisTicks": { "color": "#757575", "show": true }, "tickAmount": 4, "min": 125, "decimalsInFloat": 0, "max": 220, "axisBorder": { "color": "#757575", "show": true }, "title": { "text": "" }, "forceNiceScale": false, "labels": { "show": true, "style": { "colors": "var(--color-label-4)" }, "key": "value" } } }

series properties: [ { "data": [], "name": "tagPath" } ]

[traviscox]

I still can't replicate it. Can you try the latest version, 1.0.17, and let me know?