Skip to content

Commit 4b2e932

Browse files
authored
Update README.md
1 parent 8858185 commit 4b2e932

File tree

1 file changed

+25
-22
lines changed

1 file changed

+25
-22
lines changed

README.md

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,39 @@
1-
# chartjs-plugin-selectdrag
2-
Chartjs plugin which allows you to select a range of data by dragging over a chart
1+
# Chart JS Plugin Select Drag
2+
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
33

44
### Usage
55

66
Register the plugin with chart js...
77
```
88
import Chart from "chart.js/auto";
9-
import SelectDragPlugin from "chartjs-plugin-selectdrag;
9+
import SelectDragPlugin from "@01coder/chartjs-plugin-selectdrag";
1010
Chart.register(SelectDragPlugin);
1111
```
1212

1313
Enable it in the settings of a chart
1414
```
15-
{
16-
type: "bar",
17-
options: {
18-
plugins: {
19-
selectdrag: {
20-
enabled: true,
21-
onSelectComplete: (event) => {
22-
// Get selected range
23-
console.log(event.range);
24-
25-
// Get selection coordinates
26-
console.log(event.boundingBox);
27-
}
28-
}
29-
},
30-
},
31-
data: { labels: [], datasets: [] }
32-
});
15+
type: "bar",
16+
options: {
17+
plugins: {
18+
selectdrag: {
19+
enabled: true,
20+
onSelectComplete: (event) => {
21+
// Show selected
22+
document.getElementById('results').innerHTML = event.range;
3323
24+
// Get selected range
25+
console.log(event.range);
26+
27+
// Get selection coordinates
28+
console.log(event.boundingBox);
29+
}
30+
}
31+
},
32+
},
33+
data: {
34+
labels: [],
35+
datasets: []
36+
}
3437
```
3538

36-
*Please note: This package is yet to be fully reviewed and tested, furthermore changes need to be made for other charts and selection types...*
39+
*Please note: This package is yet to be fully reviewed and tested, furthermore changes need to be made for other charts and selection types...*

0 commit comments

Comments
 (0)