Current collected state Current
Observed since 20 Oct, 21:56 UTC
No superseded metadata states collected. Unchanged observations do not create new revisions.
@01coder/chartjs-plugin-selectdrag
Chartjs plugin which allows you to select a range of data by dragging over a chart
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,
output: 'value', // Can be 'value' or 'label'
highlight: false, // Highlight the selected data on the chart?
colors: {
selection: "#e8eff6", // Background color of selection box
selected: "#1f77b4", // Color of selected data
unselected: "#cccccc" // Color of unselected data
},
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: []
}
Download counts and popularity will appear here as the collector receives them.
| Package / target | Requirement | Relationship |
|---|---|---|
typescriptEnvironment{
"local_name": "typescript",
"alias": false,
"peer_metadata": null
} | ^4.8.2 | development |
Source distribution
{
"shasum": "9ddc9c4fdc903824930cf419394e9549db655524",
"tarball": "https://registry.npmjs.org/@01coder/chartjs-plugin-selectdrag/-/chartjs-plugin-selectdrag-1.0.0.tgz",
"fileCount": 4,
"integrity": "sha512-vicjMc1SkcSZ7MHVLEKXiI83MZxHXdg7Ym/e1C86gLwE0sgquuh+xAgNUCr/rOw2n0y9teilydapPB2rM9eWzQ==",
"signatures": [
{
"sig": "MEYCIQDrv0wWnI0LzieSY1YFQJok4H2v0nRtGQjMnkNa+Xrf5gIhAIQvs2C5zIWTe584MygCl5JlDKTd+kH88Kipinoj8z80",
"keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"
}
],
"unpackedSize": 9932,
"npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGbZgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppTA/+JTOhV43l9/+ONdKcIkAHOcXIOSnPaO70SERgqS1UeoFwZX7R\r\nGcpCLIWg+DVHBUg5Vb36BD+j1qc0AHZ3zyDzWGry/vlGMMhuZFh6eVCJvEcK\r\n012R8Ls1spKaf6hkkF8At0IjKG66t0HdyIZ+EZXkiI8nKdr1jVvQb+mts/cO\r\nIM9hps2IADD6uLrR7sRJrWBMhgXY2VmLnER5lBjJhKnw/eCLd+i7YXLL0UxA\r\nujm0vdfb+Z8klMKcvbhxaWjq0r6/8/3FYN5/TyOYywMNCXqALaZXGgf8TUuF\r\ngdORZJAAVyRIaZTx3Vw4FRCoQn9hCR5e+Ex2HQvYUpRoKq987okhsNAMwpUr\r\nyrcUTMGx2075JMIWBzUPJO3ntgJ5+6qDSfi1BpNu93qWbjPPiYAmrH3sBuoz\r\nJFTr88/WR7X01P2RPJeMQ/lRvVw7EjUq+yYVoM0WdtxzrAh2lJ6Nj7+UrJHk\r\nenAfG3qfSS1SfBhIZAs42TerF5HK/jnMxckkldTq44oZpipyg7O1B2oBnuY1\r\nnOMLdKmf24vPPJ3M/SamAfZKXZrWcyKfZ5l6XV+dvzL6ZRRaKXMXEgSHCbaI\r\n6ZkqxQQR3cD8sU90b0SfreSHdQ3/efbWfdKaaN8GLfGi2LjPEvSjnS7itAr+\r\nquNQJKOtijIpFzmAKSXywbOoqhngeZpM/OQ=\r\n=4fgU\r\n-----END PGP SIGNATURE-----\r\n"
}Shared repository data · GitHub
Observed since 20 Oct, 21:56 UTC
No superseded metadata states collected. Unchanged observations do not create new revisions.
package_version:2cef70263d2dfa0d995ff6c63b089df2eb243e9e3e1f3d0ec7caf558d05c30ba