JSFiddle - React, Tailwind, and code Playground

by JMarques

HTML

<script src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>

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

<button id="button">Select point</button>

<div id="container" style="height: 500px; min-width: 500px"></div>

JavaScript

$(function() {
    
    var xchart;
    
		// Create the chart
		xchart = new Highcharts.StockChart({
			chart : {
				renderTo : 'container'
			},

			rangeSelector : {
				selected : 1
			},

			title : {
				text : 'AAPL Stock Price'
			},
			
			series : [{
				name : 'AAPL Stock Price',
				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] ,
				marker : {
					enabled : true,
					radius : 3
				},
				shadow : true,
				tooltip : {
					valueDecimals : 2
				}
			}]
		});
	    
    
    // button handler
        var i = 0;
        $('#button').click(function() {
            if (i > 0) {
                xchart.series[0].data[i-1].setState();
                xchart.tooltip.hide();
            }
            if (i == xchart.series[0].data.length) {
                i = 0;
            }
            xchart.series[0].data[i].setState('hover');
            
            xchart.series[0].data[1].setState('hover');
            xchart.tooltip.refresh([xchart.series[0].points[i]]);
            i++;
        });
    
    
});