I want to select a particular part of line chart so that for that part I can update my other charts and display data accordingly.
<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>
My chart.ts file
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)"
}
}
}
}
});
Current output
My requirement is that at any place in the graph if I press mouse then drag it to the right then it should make a rectangular box and once I release it it should give me the points on the x axis where the rectangular box was started and where it ended so that based on that range I can update my other graphs. The rectangular box should disappear once I have released the mouse. Please community help me out with this. If this cannot be done in chartjs please suggest a free library where this can be done easily.