Missing series name as label in highcharts heatmaps - highcharts

Question

I created a calendar using a heatmap, like this:
calendar screen:
The axis types are categories, so the months are placed as blocks with the respective offset in the matrix. Every month is defined as a series with names.
Now my problem is, I want to show the month name above the block. However, I found no way to display the serial name. He is simply ignored.
The x-axis displays only the index of the category. I can not use this. The data label contains the color value for the heatmap.
My workaround currently is that I insert the month names as PlotLine. But that's not the way to go. Especially since the positioning is independent of the monthly block and thus error-prone.
series: [{
name: 'January',
keys: ['x', 'y', 'value'],
data: [...]
}, ...next month...]
jsFiddle example

Answer 1

You can use Highcharts.SVGRenderer to add series name as text in calculated position:
events: {
load: function() {
var series = this.series,
bbox;
series.forEach(function(s) {
bbox = s.group.getBBox(true);
this.renderer.text(
s.name,
bbox.x + this.plotLeft + bbox.width/2,
bbox.y + this.plotTop - 10
)
.attr({
align: 'center'
})
.css({
color: 'black',
fontSize: '12px'
})
.add();
}, this);
}
}
Live demo: https://jsfiddle.net/BlackLabel/zypnwq50/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text