https://github.com/tomhumphries/chartjs-plugin-boxselect
Chart.js plugin to select points on a chart with a click-and-drag box
https://github.com/tomhumphries/chartjs-plugin-boxselect
box chartjs chartjs-plugin line plugin scatter select
Last synced: 2 months ago
JSON representation
Chart.js plugin to select points on a chart with a click-and-drag box
- Host: GitHub
- URL: https://github.com/tomhumphries/chartjs-plugin-boxselect
- Owner: TomHumphries
- Created: 2020-11-18T15:52:26.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-05T02:53:08.000Z (about 4 years ago)
- Last Synced: 2025-03-28T22:51:13.356Z (6 months ago)
- Topics: box, chartjs, chartjs-plugin, line, plugin, scatter, select
- Language: JavaScript
- Homepage:
- Size: 242 KB
- Stars: 15
- Watchers: 2
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# chartjs-plugin-boxselect
A [Chart.js](https://www.chartjs.org) 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 `` tag
```
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.bundle.min.js">
```
## Configuration
To configure the box-select plugin, add a new config option to a chart config.
```javascript
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.
## Samples
A sample chart that shows how the `afterSelect` callback can be used to highlight data is in the /samples directory.
## Development
[rollup](https://rollupjs.org/) is required to build.
The built `boxselect.js` file is in the `/dist` directory.
The build command is `npm run build`.
## Credits
Created by [Thomas Humphries](https://github.com/TomHumphries).
Code inspired by [chartjs-plugin-crosshair](https://github.com/AbelHeinsbroek/chartjs-plugin-crosshair) and [chartjs-plugin-zoom](https://github.com/chartjs/chartjs-plugin-zoom).
## Licence
chartjs-plugin-boxselect.js is available under the [MIT licence](https://opensource.org/licenses/MIT).