Repository files navigation

AChart.js plugin to select points using click-and-drag boxes.
Works withscatter andline chart types.

To install with npm

npm install --save chartjs-plugin-boxselect

To use with a<script> tag

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.bundle.min.js"></script><script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-boxselect"></script>

To configure the box-select plugin, add a new config option to a chart config.

plugins:{boxselect:{select:{enabled:true,direction:'xy'},callbacks:{beforeSelect:function(startX,endX,startY,endY){// return false to cancel selectionreturntrue;}afterSelect:function(startX,endX,startY,endY,datasets){}}},}

Thedirection setting defines which box shapes can be drawn. The options arex,xy, ory. The default isxy.

Thedatasets parameter in theafterSelect callback is the same size as the array of datasets in the chart.
Eachdataset has the parametersdata,labels, andindexes.
data contains an array of points that fell inside the selection box.
indexes contains the corresponding index of each point that was selected from the originaldataset.datalabels contains the labels (if any) from the dataset that correspond to the selected points.

A sample chart that shows how theafterSelect callback can be used to highlight data is in the /samples directory.

rollup is required to build.
The builtboxselect.js file is in the/dist directory.
The build command isnpm run build.

Created byThomas Humphries.
Code inspired bychartjs-plugin-crosshair andchartjs-plugin-zoom.

chartjs-plugin-boxselect.js is available under theMIT licence.