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}]
}],
});