Chartjs-plugin-boxselect NPM

chartjs-plugin-boxselect

npm.io A Chart.js plugin to select points using click-and-drag boxes.
Works with scatter and line chart types.

Installation

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>

Configuration

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 selection
                return true;
            }
            afterSelect: function(startX, endX, startY, endY, datasets) {

            }
        }
    },
}

Options

The direction setting defines which box shapes can be drawn. The options are x, xy, or y. The default is xy.

The datasets parameter in the afterSelect callback is the same size as the array of datasets in the chart.
Each dataset has the parameters data, labels, and indexes.
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 original dataset.data labels contains the labels (if any) from the dataset that correspond to the selected points.