JSFiddle - React, Tailwind, and code Playground

by rayholland

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;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container'
                    },
            
                    //Code for the 'shared' tooltip in Highcharts, not required for HighStock
                    tooltip: {
                        crosshairs: true,
                        shared: true
                    },
          
                    series: [{
                            type: 'line',
                        data: [{x:0,y:0},{x:1,y:1}],
                            events: {
                                legendItemClick: function(event) {
                                    this.visible? 
                                        this.chart.get('group1').hide():
                                        this.chart.get('group1').show();
                                }
                            }
                        },{
                            type: 'line',
                            data: [{x:3,y:1},{x:4,y:0}],
                            showInLegend: false,
                            id: 'group1'
                        }
                    ]
                });
        
    });
    
});