JSFiddle - React, Tailwind, and code Playground

by Chris L

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        xAxis: {
            categories: ['R', 'S', 'T']
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            changeSeriesVisibility(this.series.options.id);
                        }
                    }
                }
            }
        },
        series: [{
            "data": [3570.5],
                "name": "R",
                "id": 0
        }, {
            "data": [3000],
                "name": "S",
                "id": 1
        }, {
            "data": [2500],
                "name": "T",
                "id": 2
        }]
    });

    function changeSeriesVisibility(id) {
        // Hide/Show the series on click

        var chart = $('#container').highcharts();
        var isVisible = chart.get(id).visible;
        chart.get(id).setVisible(!isVisible);
    }
});