Column Labels in Sankey Charts in Highcharts - highcharts

Question

I've been working on a visualisation using Sankey chart using Highcharts library. It looks like below.
I need help with adding labels to each column as highlighted in the above image. I couldn't find any workaround using formatters since there are no x & y axes available in sankey.
It would be great someone here helps me with doing it.
you can find my jsfiddle here.
EDIT: I was able to plot the x & y axes now, but trying to place the labels exactly below each column. Broken fiddle link updated.
const data = [{
"from": "step1_x",
"to": "step2_x",
"weight": 100
},
{
"from": "step1_x",
"to": "step2_y",
weight: 35
},
{
"from": "step1_x",
"to": "step2_z",
weight: 50
},
{
"from": "step1_y",
"to": "step2_y",
weight: 55
},
{
"from": "step1_y",
"to": "step2_x",
weight: 20
},
{
"from": "step1_y",
"to": "step2_z",
weight: 30
},
{
"from": "step1_z",
"to": "step2_y",
weight: 18
},
{
"from": "step1_z",
"to": "step2_x",
weight: 15
},
{
"from": "step1_z",
"to": "step2_z",
weight: 40
},
{
"from": "step2_x",
"to": "step3_x",
"weight": 50
},
{
"from": "step2_x",
"to": "step3_y",
weight: 55
},
{
"from": "step2_x",
"to": "step3_z",
weight: 30
},
{
"from": "step2_y",
"to": "step3_y",
weight: 90
},
{
"from": "step2_y",
"to": "step3_x",
weight: 40
},
{
"from": "step2_y",
"to": "step3_z",
weight: 51
},
{
"from": "step2_z",
"to": "step3_y",
weight: 30
},
{
"from": "step2_z",
"to": "step3_x",
weight: 40
},
{
"from": "step2_z",
"to": "step3_z",
weight: 90
},
];
const nodes = [{
"id": "step1_x",
"name": "X",
color: 'black'
}, {
"id": "step2_x",
"name": "X",
color: 'black',
},
{
"id": "step3_x",
"name": "X",
color: 'black',
},
{
"id": "step1_y",
"name": "Y",
color: '#f15c80'
}, {
"id": "step2_y",
"name": "Y",
color: '#f15c80'
}, {
"id": "step3_y",
"name": "Y",
color: '#f15c80'
}, {
"id": "step1_z",
"name": "Z",
color: '#f7a35c'
}, {
"id": "step2_z",
"name": "Z",
color: '#f7a35c'
}, {
"id": "step3_z",
"name": "Z",
color: '#f7a35c'
},
];
Highcharts.chart('container', {
title: {
text: 'Highcharts Sankey Diagram'
},
yAxis: {
labels: {
enabled: true,
formatter:function () {
return '1231';
}
}
},
series: [{
data: data,
nodes: nodes,
type: 'sankey',
name: 'Sankey demo series',
nodeWidth: 20
}],
plotOptions: {
sankey: {
dataLabels: {
overflow: 'allow',
crop: true,
enabled: true,
formatter: function () {
return this.point.weight;
}
}
}
}
});

Answer 1

You can add the labels by using renderer.text method. Example below:
const labels = ['column 1', 'column 2', 'column 3'];
Highcharts.chart('container', {
chart: {
spacingBottom: 50,
events: {
render: function() {
const positions = [30, this.chartWidth / 2, this.chartWidth - 30];
if (this.customLabels) {
this.customLabels.forEach((customLabel, i) => {
customLabel.attr({
x: positions[i],
y: this.chartHeight - 20
});
});
} else {
this.customLabels = [];
labels.forEach((label, i) => {
this.customLabels.push(
this.renderer.text(labels[i])
.attr({
x: positions[i],
y: this.chartHeight - 20,
align: 'center'
})
.css({
fontSize: '12px'
})
.add()
);
});
}
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/tq79c21e/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text