How can I add customized y axis in highchart basic bar? - highcharts

Question

I want to make a chart like this in highchart. How can I add the yellow colored box in my chart

Answer 1

It can be made by adding additional x-axes (in a bar chart x-axes are vertical ones) and setting them as opposite and linked to the main axis. Check the code and demo posted below and let me know if something is unclear to you.
Code:
const defaultLabelOptions = {
opposite: true,
linkedTo: 0,
lineWidth: 0,
tickWidth: 0
};
const defaultAxisTitleOptions = {
align: 'high',
rotation: 0,
margin: 0,
textAlign: 'center',
style: {
'text-decoration': 'underline',
'font-weight': 'bold'
}
};
// ...
xAxis: [{
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
}, {
...defaultLabelOptions,
offset: 50,
labels: {
align: 'right',
formatter: function() {
return labels.le[this.value];
}
},
title: {
text: 'LE',
...defaultAxisTitleOptions
}
}, {
...defaultLabelOptions,
offset: 110,
labels: {
align: 'right',
formatter: function() {
return labels.tgt[this.value];
}
},
title: {
text: 'TGT',
...defaultAxisTitleOptions
}
}]
Demo:
https://jsfiddle.net/BlackLabel/68hdutxv/
API reference:
https://api.highcharts.com/highcharts/yAxis.opposite
https://api.highcharts.com/highcharts/yAxis.linkedTo
If you want to have lines between the additional axes you can add them using Highcharts.SVGRenderer: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer