Highchart Persist bar widh for null data - highcharts

Question

I have a simple HighStock chart with two series as shown in below image:
So functionality wise, HighChart decreases the width of the bar as soon as new series is added.
But I don't want to decrease the width of the bar, when there is data for only one series at specific point. (here date, 17. May)
Here is the Fiddle I have created. Try hiding one of the series and see width of the bar. The same width should be applied for the bar on "17. May" when both series are visible as there is data for only one series for that date. As shown below:
I have used below code:
Highcharts.stockChart('container', {
chart: {
alignTicks: false
},
legend: {
enabled: true
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Volume'
},
"series":[
{
"name":"Key Rate 319",
"type":"column",
"data":[{x: 1147651200000, y: 1}, {x: 1147737600000, y: 7}, {x: 1147824000000, y: 5}, {x: 1147910400000, y: 4}],
"marker":{"enabled":false},
"shadow":false,
"color":"blue"
},
{
"name":"Key Rate 321",
"type":"column",
"data":[{x: 1147651200000, y: 4}, {x: 1147737600000, y: 2}, {x: 1147824000000, y: null}, {x: 1147910400000, y: 1}],
"color":"green"
}]
});
How can I achieve this ?

Answer 1

Series has two properties for controlling the range and placement of points: pointRange & pointPlacement. They work for all series' points and unfortunately can't be applied to individual columns.
Workaround
Disable grouping and reset pointPadding & groupPadding:
plotOptions: {
series: {
grouping: false,
pointPadding: 0,
groupPadding: 0
}
},
Create a separate series for every point and apply appropriate pointRange & pointPadding to them. Then link them using linkedTo property to mimic the original series structure:
series: [{
name: 'First series',
color: '#bada55',
data: [
[0, 2]
],
pointRange: 0.4,
pointPlacement: -0.5
}, {
data: [
[1, 7]
],
linkedTo: ':previous',
color: '#bada55',
pointRange: 0.4,
pointPlacement: -0.5
}, {
data: [
[2, 5]
],
linkedTo: ':previous',
color: '#bada55',
//pointRange: 1, // by default
//pointPlacement: 0 // by default
}, {
data: [
[3, 4]
],
linkedTo: ':previous',
color: '#bada55',
pointRange: 0.4,
pointPlacement: -0.5
}, {
name: 'Second series',
data: [
[0, 1]
],
color: '#c0ffee',
pointRange: 0.4,
pointPlacement: 0.5
}, {
data: [
[1, 2]
],
linkedTo: ':previous',
color: '#c0ffee',
pointRange: 0.4,
pointPlacement: 0.5
}, {
data: [
[3, 2]
],
linkedTo: ':previous',
color: '#c0ffee',
pointRange: 0.4,
pointPlacement: 0.5
}]
Live demo: http://jsfiddle.net/BlackLabel/q7j4m8eb/
Disadvantage of this approach are that you must define color for each point (series) explicitly and the data structure look a bit complex.
All options mentioned above can be found in the API: https://api.highcharts.com/highcharts/