Is it possible to create such a chart in Highcharts? It’s a couple of bar charts standing next to each other but with the same y-axis. Each bar chart represents a different set of data, but they are aligned to the same vertical axis, allowing for easy comparison of values between the two datasets.
Please take a look at the image below as a reference.
Image: https://i.sstatic.net/IY7r9tpW.png
Nguyễn Nam is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Yes it’s possible.
To achieve this, we need to divide the chart into 5 parts, for example. Each part of the chart will have one yAxis and one series inside it.
To get that effect, we need to set the width of all yAxes to 20%, and then each subsequent axis should be shifted by another 20%. We will do this using the left property. So, the first yAxis: left: 0%, width: 20%, the second yAxis: left: 20%, width: 20%, and so on.
API references:
https://api.highcharts.com/highcharts/yAxis.left
https://api.highcharts.com/highcharts/yAxis.width
Demo:
https://jsfiddle.net/BlackLabel/x1b320nt/
yAxis: [{
width: '20%',
visible: false,
}, {
left: '20%',
visible: false,
width: '20%'
}, {
left: '40%',
visible: false,
width: '20%'
}, [...]]
1