JSFiddle - React, Tailwind, and code Playground

by nsjithin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<!doctype html>
<html lang="en-GB">
<head>
	<title>Mutliple axis</title>
</head>
<body>
	<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>

JavaScript

$(function () { 
		    var myChart = Highcharts.chart('container', {
		        chart: {
		            type: 'line',
		            events: {
			            load: function () {
							var sea_level = this.series[0];
			                var rainfall_level = this.series[1];
			                console.log(Date.UTC(1970, 9, 21), sea_level);
			                	
			                // setInterval(function () {
			                // 	console.log(sea_level.processedXData, rainfall_level.processedXData);

			                //     // var x = (new Date()).getTime(), // current time
			                //     //     y = Math.random();
			                //     // series.addPoint([x, y], true, true);
			                // }, 1000);
			            }
			        }
		        },
		        title: {
		            text: 'Bank Nifty Futures'
		        },
		        plotOptions: {
					line: {
						lineWidth: 1
					}
				},
				legend: {
					enabled: true
				},
		        xAxis: {
		         //    type: 'datetime',
			        // dateTimeLabelFormats: { // don't display the dummy year
			        //     month: '%e. %b',
			        //     year: '%b'
			        // },
			        // title: {
			        //     text: 'Date'
			        // }
		        },
		        yAxis: [
		            {
						opposite: false,
						title: {
							text: "Future",
							style: {
								color: "#212121"
							}
						},
						labels: {
							format: "{value}",
							style: {
								color: "#212121"
							}
						}
					},
					{
						gridLineWidth: 0,
						title: {
							text: "Spot",
							style: {
								color: "#1976D2"
							}
						},
						labels: {
							format: "{value}",
							style: {
								color: "#1976D2"
							}
						}
					},
					{
					gridLineWidth: 0,
						title: {
							text: "Open Interest",
							style: {
								color: "#388E3C"
							}
						},
						labels: {
							format: "{value}",
							style: {
								color: "#388E3C"
							}
						}
					}
		        ],
		   ...