Package Exports

@01coder/chartjs-plugin-selectdrag
@01coder/chartjs-plugin-selectdrag/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@01coder/chartjs-plugin-selectdrag) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Chart JS Plugin Select Drag

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

Usage

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: []
}

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