如何在图表js中select折线图的特定部分

Question

我想 select 折线图的特定部分，这样我就可以更新我的其他图表并相应地显示数据。

<div class="card mb-4 ">
<div class="card-header">
    <i class="fa fa-area-chart me-1"></i>
    Frequency vs Acceleration
</div>
<div class="card-body">
    <canvas id="myLineChart" width="100%"  height="30"></canvas>

</div>
<div class="card-footer small text-muted">
    Updated on {{chartUpdateTime|date:'mediumDate'}} at {{chartUpdateTime|date:'shortTime'}}
</div>

我的 chart.ts 文件

ngOnInit():void{

var myLineChart = new Chart('myLineChart', {
type: 'line',

data: {
  labels: ["0Hz", "20Hz", "40Hz", "60Hz", "80Hz", "100Hz", "120Hz", "140Hz", "160Hz", "180Hz"],
  datasets: [{
    label: 'Frequency',
    tension:0.4,
    backgroundColor: 'rgba(0,120,214,1)',
    borderColor: 'rgba(0,120,214,1)',
    pointRadius: 3,
    pointBackgroundColor: 'rgba(0,120,214,1)',
    pointHoverRadius: 4,
    pointHoverBackgroundColor: 'rgba(0,120,214,1)',
    pointHitRadius: 50,
    pointBorderWidth: 2,
    data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159],
  }],
},
options: {
  scales: {
    xAxis:{
      
      grid:{
        display:false
      },
      ticks:{
        maxTicksLimit:7,
        
      }
    },
    yAxis:{
      
      ticks:{
        maxTicksLimit:5
      },
      grid:{
        color: "rgba(0, 0, 0, .125)"
      }
    }
   
  }
 
}
});

当前 output

我的要求是，在图表中的任何位置，如果我按下鼠标然后将其拖动到右侧，那么它应该制作一个矩形框，一旦我释放它，它应该给我 x 轴上矩形框开始的位置和位置它结束了，以便基于该范围我可以更新我的其他图表。 松开鼠标后，矩形框应该会消失。 请社区帮助我解决这个问题。 如果这不能在 chartjs 中完成，请建议一个可以轻松完成的免费库。