rushikesh
Posts: 31
Joined: Wed Jul 20, 2022 10:14 am

highcharts aligning x axis with y axis in mutiple x axis and y axis

I have 2 x axis and 2 y axis in my application.
both the y axis need to be of same height.
and there will be 3 series.
one of them will be on the first x axis.
I created sample example: https://jsfiddle.net/yhx4ta8n/

So, problem I am facing is second x axis is not aligned with the second y axis. there is a gap between second y axis and second x axis.

I want to remove this gap.
How can I achieve this?
I tried using top property of x axis. But , I am not sure whether that will work with any type of data in my application.
In my app, sometime top -4% works and sometime top -7%. I have no idea which works in which condition.
for convenience pasting the config:
Highcharts.chart('container', {

title: {
text: 'U.S Solar Employment Growth by Job Category, 2010-2020',
align: 'left'
},

subtitle: {
text: 'Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>',
align: 'left'
},

yAxis: [{
height: '50%',
title: {
text: 'First Y Axis'
}
},
{
height: '50%',
top: '50%',
title: {
text: 'Another Y Axis'
}
}],

xAxis: [{
labels : {
enabled: false
},
top: '50%',
accessibility: {
rangeDescription: 'Range: 2010 to 2020'
}
},
{
linkedTo: 0,
accessibility: {
rangeDescription: 'Range: 2010 to 2020'
}
}],



series: [{
name: 'Installation & Developers',
data: [43934, 48656, 65165, 81827, 112143, 142383,
171533, 165174, 155157, 161454, 154610]
}, {
name: 'Manufacturing',
yAxis: 1,
xAxis: 1,
data: [24916, 37941, 29742, 29851, 32490, 30282,
38121, 36885, 33726, 34243, 31050]
},{
name: 'Markers',
yAxis: 0,
xAxis: 0,
data: [{x: 0, y: 0},{x: 1, y: 0},{x: 2, y: 0}]
}],


});
jakub.s
Posts: 1163
Joined: Fri Dec 16, 2022 11:45 am

Re: highcharts aligning x axis with y axis in mutiple x axis and y axis

Hi,

Thanks for the question.

The gap you're trying to eliminate is determined by yAxis.offset property. By setting it on both yAxis to the same number, you'll get rid of this gap.

Demo: https://jsfiddle.net/BlackLabel/7ecn13rk/
API: https://api.highcharts.com/highcharts/yAxis.offset

Let me know if that's what you were looking for.

Best regards,
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Stock”