Highcharts Demo

author(s): Torstein Hønsi

by Alagar Kamuthurai

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 310px;
    height: 400px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

/*
 * Display a temporary label on the chart
 */
function toast(chart, text) {
    chart.toast = chart.renderer.label(text, 100, 120)
        .attr({
            fill: Highcharts.getOptions().colors[0],
            padding: 10,
            r: 5,
            zIndex: 8
        })
        .css({
            color: '#FFFFFF'
        })
        .add();

    setTimeout(function () {
        chart.toast.fadeOut();
    }, 2000);
    setTimeout(function () {
        chart.toast = chart.toast.destroy();
    }, 2500);
}

/*
 * Custom selection handler that selects points and cancels the default zoom
 * behaviour
 */
function selectPointsByDrag(e) {
console.log(e);

    // Select points
    this.series.forEach(series => {
        series.points.forEach(point => {
            if (point.x >= e.xAxis[0].min && point.x <= e.xAxis[0].max &&
                    point.y >= e.yAxis[0].min && point.y <= e.yAxis[0].max) {
                point.select(true, true);
            }
        });
    });

  /*   // Fire a custom event
    Highcharts.fireEvent(
        this,
        'selectedpoints',
        { points: this.getSelectedPoints() }
    );
    
    return false; // Don't zoom */
}

/*
 * The handler for a custom event, fired from selection event
 */
function selectedPoints(e) {
    // Show a label
    toast(
        this,
        `<b>${e.points.length} points selected.</b>
        <br>Click on empty space to deselect.`
    );
}

/*
 * On click, unselect all points
 */
function unselectByClick() {
    const points = this.getSelectedPoints();
    if (points.length > 0) {
        points.forEach(point => point.select(false));
    }
}

Highcharts.chart('container', {

    title: {
        text: 'Select points by click-drag'
    },

    chart: {
        type: 'scatter',
        events: {
            selection: selectPointsByDrag,
            selectedpoints: selectedPoints,
            click: unselectByClick
        },
        zoomType: 'xy'
    },

    series: [{
        data: [
         ...