Highstock start date issue in rangeSelector datepicker when manually changing to out of date range - highcharts

Question

I have a multiple series chart created in Highstock and each line data starts at different date.
Fund A start date : Oct 8, 2002
Fund B start date : Nov 15, 1995
On first load the chart will have a start date from Nov 15, 1995 to latest data date.
If I manually key-in the start date at the datepicker for an out of range date e.g. Nov 15, 1990 the datepicker will automatically reset to Fund A start date, Oct 8, 2002.
Any ideas on how to make it to refresh correctly as per initial load date? I would like to avoid the user to have to click the All button again in the rangeSelector.
Link for reference
https://jsfiddle.net/mrseia/j8d2Lrve/4/
$(function () {
var seriesOptions3 = [];
seriesCounter3 = 0;
var tl = document.getElementById('str').value;
var x = tl.split('|');
var fnd = document.getElementById('dataPoint').value;
var y = fnd.split(';');
var stripe = document.getElementById('stripe').value;
var z = stripe.split(',');
for(i=0; i<x.length; i++)
{
var data = eval(y[i]);
var name = x[i];
var strip = z[i];
seriesOptions3[seriesCounter3] =
{
name : name,
dashStyle : strip,
data : data
};
seriesCounter3++;
}
Highcharts.stockChart('cumChartResp',{
rangeSelector: {
selected: 5
},
legend: {
enabled: true,
align: 'center',
borderWidth: 0.5,
layout: 'horizontal',
verticalAlign: 'bottom',
itemStyle: {
color: '#000000',
fontWeight: 'bold',
fontSize: '14px'
},
symbolWidth: 42
},
credits: {
enabled: false,
text: 'Powered by Novagni',
href: 'http://www.novagni.com.my'
},
yAxis: {
title: {
text: 'Cumulative Returns (%)'
},
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions:{
series:{
dataGrouping:{
enabled: false
},
compare: 'percent',
compareStart: true,
lineWidth: 3
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: {point.change}%<br/>',
valueDecimals: 2,
split: true,
xDateFormat: '%A, %b %d, %Y'
},
//<b>{point.y}</b> ({point.change}%)<br/> '%d-%m-%Y'
title: {
text: 'Cumulative Returns',
style: {
color: '#333333',
fontWeight: 'bold',
fontSize: '18px'
}
},
subtitle: {
text: 'The Start Date for all cumulative returns calculation for the periods of 1m, 3m, 6m & 1y is based in reference to the latest Start Date amongst the selected funds',
style: {
color: '#333333',
fontSize: '14px'
}
},
colors: ['#0067B1', 'black', '#865439', '#00FF00', '#FFD700'],
exporting: { enabled: false },
series: seriesOptions3
});
})

Answer 1

It occurs because the rangeSelector gets extremes from the navigator. You can set for each series showInNavigator: true to avoid that behaviour.
Demo: https://jsfiddle.net/BlackLabel/njpe98hx/