JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

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

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

JavaScript

$(function () {
    $('#container').highcharts({
        legend: {
            align: "left"
        },
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Snow depth at Vikjafjellet, Norway'
        },
        subtitle: {
            text: 'Irregular time data in Highcharts JS'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Snow depth (m)'
            },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
        },

        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            },
                ////JGONZALEZ315
            
            series:{
            		events: {
							legendItemClick: function (e) {
                                
                                debugger;  
								var seriesArr=$('#container').highcharts().series;
								var visible = this.visible;
								var index = this.index;
								for(var i=0; i<seriesArr.length;i++)
                                {
                                    if(i!=index)
                                    {
                                        seriesArr[i].setVisible(false, false);
                                    }
                                }
                                
                                this.visible=false;  
                                

							}
						}
            }
            
        
        },

        series: [{"data": [["2015-11-15T08:00:00+0000", 55], ["2015-11-16T08:00:00+0000", 45], ["2015-11-17T08:00:00+0000", 32], ["2015-11-18T08:00:00+0000", 54],...