Chartjs plugin which allows you to select a range of data by dragging over a chart, see example https://stackblitz.com/edit/chartjs-selectdrag?file=index.html
Register the plugin with chart js...
import Chart from "chart.js/auto";
import SelectDragPlugin from "@01coder/chartjs-plugin-selectdrag";
Chart.register(SelectDragPlugin);
Enable it in the settings of a chart
type: "bar",
options: {
plugins: {
selectdrag: {
enabled: true,
onSelectComplete: (event) => {
// Show selected
document.getElementById('results').innerHTML = event.range;
// Get selected range
console.log(event.range);
// Get selection coordinates
console.log(event.boundingBox);
}
}
},
},
data: {
labels: [],
datasets: []
}
Please note: This package is yet to be fully reviewed and tested, furthermore changes need to be made for other charts and selection types...