JSFiddle - React, Tailwind, and code Playground

by Chitkala More

HTML

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

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>

JavaScript

Highcharts.chart('container',
{
	chart: {
		},
	navigator: {
		enabled: true,
	},
	rangeSelector: {
		enabled: true,
		inputEnabled: true,
		buttonPosition: {
			align: 'right'
		},
		labelStyle: {
			display: 'none'
		},
		buttons: [{
			type: 'month',
			count: 1,
			text: '1m'
		},
		{
			type: 'month',
			count: 3,
			text: '3m'
		},
		{
			type: 'month',
			count: 6,
			text: '6m'
		},
		{
			type: 'year',
			count: 1,
			text: '1y'
		},
		{
			type: 'year',
			count: 2,
			text: '2y'
		},
		{
			type: 'year',
			count: 5,
			text: '5y'
		},
		{
			type: 'all',
			text: 'All'
		},
		{
			type: 'all',
			text: 'Latest',
      events: {
          click: () => {
           
           alert('in real app I scroll to latest results');

            return false;

          }
          }
		}]
	},
	xAxis: {
		scrollbar: {
			enabled: true
		},
		type: 'datetime',
		opposite: true		
	},
	legend: {
		enabled: false
	}, series: [{name: 'my lab test', data: [{
	x: 1328054400000,
	y: 0.4	
},
{
	x: 1330560000000,
	y: 3.9	
},
{
	x: 1333238400000,
	y: 3.9	
},
{
	x: 1518652800000,
	y: 1.3
},
{
	x: 1520640000000,
	y: 4.9
},
{
	x: 1522540800000,
	y: 4.6	
}]}]
});