Search code examples
chartshighcharts

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

Solution

  • 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

    Demo: https://jsfiddle.net/BlackLabel/2mr64bec/