Highcharts Demo

author(s): Torstein Hønsi

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.animate({
            opacity: 0
        });
    }, 2000);
    setTimeout(function () {
        chart.toast = chart.toast.destroy();
    }, 2500);
}

/*
 * Custom selection handler that selects points and cancels the default zoom
 * behaviour
 */
function selectPointsByDrag(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
        },
        zooming: {
            type:...