CODEWITHSUNDEEP
jqueryhighcharts
Jef
Jef

Reputation: 811

Position dataLabel above a certain column Highcharts

I have a stacked back chart, in which I have added an invisible bar to the height of the highest bar. So when a column contains a small value, this column will still be clickable. In this case, the columns with value 1 would be hardly clickable without the invisible stack.

However, I have a problem with aligning the labels above each column. I know I can use some like:

 dataLabels: {
    enabled: true,
    color: blue,
    y: -100,
}

but that doesn't really work as you can see in the image. The value of the last bar is showing in the bar, which makes it invisible.

enter image description here

It would be best if I could get the top from a bar in a certain serie, (2nd one in my case) and position the dataLabel a little bit above it. Something like the stackLabels.

I tried something like this, but without succes:

$.each(chart.series[1], function (pointIndex, point) {
            if (point !== undefined) {
                var elem = point.graphic.element.getBBox();
                point.dataLabel.attr({ y: elem + 20 });
            }
        });

Upvotes: 1

Views: 450

Answers (1)

Jef
Jef

Reputation: 811

The solution was a lot easier than I thought, I ended up doing the following:

var chart = $('#target').highcharts();
var points = chart.series[1].points;


$.each(points, function (pointIndex, point) {
            text = chart.renderer.text(
                'Put whatever you like here',
                point.plotX + chart.plotLeft - 10,
                point.plotY + chart.plotTop - 20
            ).attr({
                zIndex: 5
            }).add();
        });

Code from this example was used.

Upvotes: 1

Related Questions