Show uniformed zoomed chart on page load

[sp-suresh]

I have integrated zoom and pan perfectly. My problem is I have a lot of data(~7 days) to plot due to which points on charts are very close to each other and look congested.
User will have to zoom the area of interest(mostly the latest data on right) and analyze the same. I was trying to zoom and show last few (~1 day) data an allow the user to pan on left direction to look for historical data.
Is it possible to do this?
I am not able to find which option will help me in achieving this.

Any better approach is welcomed :)

Below is my chart configuration:

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 = []
  }
}

[etimberg]

Once #82 is done, this will be possible