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
You can easily control which points display dataLabels using formatter function. In your case (for example) you can show dataLabels only for points which y value is not undefined. That will ensure one dataLabel per x value. Take a look:
formatter: function() {
if (this.y !== undefined) {
return 'X';
}
},
API reference: https://api.highcharts.com/highcharts/series.columnrange.dataLabels.formatter