JSFiddle - React, Tailwind, and code Playground

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: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var chart;

    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'container',

                type: 'line',

                marginRight: 130,

                marginBottom: 25

            },
            plotOptions: {
        line: {
            
                events: {
                    legendItemClick: function () {
                        chart.yAxis[0].addPlotLine({
                        value : 7.5,
                        color : 'green',
                        dashStyle : 'shortdash',
                        width : 2,
                        label : {
                            text : 'My PlotLine'
                        }
                    });
                    
                     if (!this.visible)
                     return true;
                    
                    var seriesIndex = this.index;
                    var series = this.chart.series;
                    
                    for (var i = 0; i < series.length; i++)
                    {
                        if (series[i].index != seriesIndex)
                        {
                            
                            series[i].visible ? series[i].hide() : 			                                       series[i].show();
                        } 
                    }
                     return false;
                        //return false; // <== returning false will cancel the default action
                    }
                }
            ,
            showInLegend: true
        }
    },                
            title: {

                text: 'Monthly Average Temperature',

                x: -20 //center

            },

            subtitle: {

                text: 'Source: WorldClimate.com',

                x: -20

            },

            xAxis: {

                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

                    'Jul', 'Aug',...