JSFiddle - React, Tailwind, and code Playground

by Charissima

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 500px"></div>

JavaScript

$(function() {
		
			var myData = [];
			for (var i = 0; i < 50; i++) {
				myData.push(i + Math.random() * 3);
			}
			myData.push(51);
			for (var i = 52; i < 40000; i++) {
				myData.push(i + Math.random() * 3);
			}			
		
			chart = $('#container').highcharts('StockChart', {
				chart : {
					zoomType: 'x',
					events : {
						load : function() {
							myChart = this;
							mySeries = this.series[1];
						},
	        		}
				},

 				plotOptions: {
					series: {
						dataLabels: {
						enabled: true,
						formatter: setDataLabels
						}
					}
				},
        							
				series: [
					{
						name: 'USD to EUR',
						id : 'dataseries',
						color: 'blue',
						data: myData
					}
				]	
				
			});
       

			function setDataLabels() {
			if (this.y == 51) {
				// Low
				var myHTML =
					'<div style="position:relative; top: 20px;">' +
					'	<div style="color: #ff00ff; font-size:10px">' + this.y + '</div>' +				
					'</div>';
				return myHTML;
			} else if ( this.y == 4000) {
				// High
				var myHTML =
					'<div style="color: #A0A0A0; font-size:10px">' + e.point.y + '</div>';								
				return myHTML;			
			} else {
				return null;
			}
			}
		
		});