JSFiddle - React, Tailwind, and code Playground

by brian428

HTML

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

<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(function () {

    /**
     * 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) {

        // Select points
        Highcharts.each(this.series, function (series) {
        debugger;
            Highcharts.each(series.points, function (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() {
        var points = this.getSelectedPoints();
        if (points.length > 0) {
            Highcharts.each(points, function (point) {
                point.select(false);
            });
        }
    }

    $('#container').highcharts({

        title: {
            text: 'Select points...