DataLabel formatter shows label multiple times on columnrange bars

I want to show "X" on bars on their mean on a columnrange highchart. If the inverted is "true", my logic works just fine. But, if it's false it shows "X" two times on the bar. Here is the link:

https://jsfiddle.net/px8jz2gw/71/

"dataLabels": {
"enabled": true,
"align": "center",
formatter: function () {
return 'X';
},
"style": {
"fontSize": "12px",
"color": "black"
}
},


Change "inverted" attribute of chart to true, it'll work fine and show "X" only once, else it shows two "X" on bars. What should be the solution, I have already spent a lot of hours on this.

Note: Maybe it has something to do with datalabels formatter, as I printed console there, and instead of running 3 times, it ran 6 times here in jsfiddle, and 18 times in my real angular application.

Kindly help me with this. Thanks

Continue reading...