Load more historical data in Line charts on panning left - chart.js

Question

I am plotting line chart data using ChartsModule from ng2-charts. I have also added a plugin to enable zoom and pan.
The problem is I have a lot of data to show and plot, but on page load, I am loading only last 1-day data and want to give the user an option to see historical data by panning to left.
I am getting onPanComplete event on chart panning and able to update the datasets but not sure how I will know that the user has reached to the left end of the chart so that I will load more data and update the datasets.
Below is my chart component:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements OnInit {
lineChartData: any;
chartDataSets: any;
constructor() { }
public lineChartOptions
ngOnInit() {
var sampleData = [
{
"CreateDate": "2019-08-12 15:30:03",
"NewBuyValue": "16,791.658178"
},
{
"CreateDate": "2019-08-12 14:30:29",
"NewBuyValue": "16,760.46713691"
},
{
"CreateDate": "2019-08-12 13:30:31",
"NewBuyValue": "16,792.80212024"
},
{
"CreateDate": "2019-08-12 12:30:27",
"NewBuyValue": "16,740.86970638"
}
].map(d => {
return {
t: new Date(d.CreateDate),
y: d.NewBuyValue.replace(',', '')
}
})
this.chartDataSets = [{
label: 'Buy Price',
backgroundColor: "#2072ef",
borderColor: '#2072ef',
type: 'line',
pointRadius: 0,
fill: false,
lineTension: 0,
borderWidth: 2,
data: sampleData
}]
this.lineChartOptions = {
pan: {
enabled: true,
mode: 'x',
onPan: function (e) {
console.log(`I'm panning!!!`, e);
},
onPanComplete: function (e) {
console.log(`I was panned!!!`, e);
e.chart.config.data.datasets[0].data.pop()
}
},
zoom: {
enabled: true,
mode: 'x',
},
hover: {
mode: 'nearest',
intersect: true
},
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
},
type: 'time',
distribution: 'series',
ticks: {
source: 'data',
autoSkip: false
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Prices'
}
}]
},
tooltips: {
intersect: false,
mode: 'index',
callbacks: {
label: function (tooltipItem, myData) {
var label = myData.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += parseFloat(tooltipItem.value).toFixed(2);
return label;
}
}
}
}
this.lineChartData = []
}
}
Also, I would like to know If there is any better way to implement history data load on panning event

Answer 1

I loaded 1 week data and updated time.min for xAxis to the value of the current date start. That's done the trick
this.lineChartOptions.scales.xAxes[0].time.min = chartData.data[0].t - 24 * 3600000