How to add additional labels to base of columns in Highcharts?

Question

I need two labels for a column, one above to show the score and one below to show if it is a "test" or a "retest". How do I go about doing it?

I assume complicated calculation is needed, something like this? http://jsfiddle.net/72xym/4/ (but I can't really understand)

I got other diagrams need to achieve this as well. Basically I need to do this:

My code is inside here: http://jsfiddle.net/kscwx139/6/

I did this for the part to add the label:

..., function() {
    var i = 0, j = 0, len_i, len_j, self = this, labelBBox, labels=[];
    for(i=0; i<this.series.length; i++) {
        labels[i] = [];
        for(j=0; j<this.series[i].data.length; j++) {
            labels[i][j] = this.renderer.label(self.series[i].name)
                .css({
                width: '100px',
                color: '#000000',
                fontSize: '12px'
            }).attr({
                zIndex: 100
            }).add();

            labelBBox = labels[i][j].getBBox();
            labels[i][j].attr({
                x: 100, //1) what to put here?
                y: 100 //2) what to put here?
            });
        }
    }
}

Answer 1

I would do something like this:

var chart2 = new Highcharts.Chart(options2, function() {
  var i = 0, j = 0, len_i, len_j, self = this, labelBBox, labels=[], point;
  for(i=0; i<this.series.length; i++) {
    labels[i] = [];
    for(j=0; j<this.series[i].data.length; j++) {
        labels[i][j] = this.renderer.label(self.series[i].name)
            .css({
            width: '100px',
            color: '#000000',
            fontSize: '12px'
        }).attr({
            zIndex: 100,
            align: "center"
        }).add();

        point = this.series[i].data[j];
        labelBBox = labels[i][j].getBBox();
        labels[i][j].attr({
            x: point.plotX + this.plotLeft + point.series.pointXOffset + point.shapeArgs.width / 2, 
            y: this.plotTop + this.plotHeight - labelBBox.height
        });
    }
  }
});

Demo: http://jsfiddle.net/kscwx139/7/

Note: I would suggest using chart.redraw event to update labels position ( label[i][j].animate({ x: ..., y: ... }); ) when resizing browser, updating data, etc.

Short explanation:

• point.plotX - x-position in the plotting area (center of the point's shape)
• this.plotLeft - left offset for left yAxis (labels, title)
• point.series.pointXOffset - offset for multiple columns in the same category
• this.plotTop - the same as plotLeft but from top ;)
• this.plotHeight - height of the plotting area
• labelBBox.height - height of the label to place it above the xAxis line