JSFiddle - React, Tailwind, and code Playground

by navindian

HTML

<script src="http://highcharts.com/js/testing.js" type="text/javascript"></script>
<div id="container" style="height: 400px"></div>
   
<input id="btnenabledisable" type="button" value="Enable/Disable"></input>

JavaScript

$(function() {
    var chart;
    $(document).ready(function() {
            chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },
           

            plotOptions: {
                series: {
                    showCheckbox: true,
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            legend : {
                    floating : false,
                    width : 60,
                    verticalAlign : 'top',
                    y : 50,
                    shadow : true,

                    enabled : true,
                    align : 'left',
                    layout : 'vertical',
                    padding : 20,

                    itemWidth : -1,

                    itemStyle : {
                        color : '#cccccc'
                    },
                    itemHoverStyle : {
                        color : '#ffffff'
                    },
                    itemHiddenStyle : {
                        color : '#333333'
                    },
                    useHTML : true

                },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
            {
                data: [5, 55, 45.4, 67, 55.0, 125.0, 543.6, 44.5, 216.4, 194.1, 95.6, 54.4]}]
        });

        $("#btnenabledisable").toggle(function() {
            $('.highcharts-legend, .highcharts-container input').hide();
        },function(){
            $('.highcharts-legend, .highcharts-container input').show();
        });

        //Get options for the chart


        function GetOptions(charten) {
            var chart = charten,
                seriesOptions, options = chart.options;
            options.series = [];
            $.each(chart.series, function(index, serie) {
                seriesOptions = GetSeriesOptions(serie);

               ...