JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
	<head>
	
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Monthly Expenditure</title>

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<style type="text/css">
		${demo.css}
		</style>
		<script type="text/javascript">
		$(function () {
			$('#container').highcharts({
				title: {
					text: 'Monthly Expenditure'
				},
				xAxis: {
					categories: ['Jun', 'Jul']
				},
				yAxis: [{
						min: 0,
						title: {
							text: ''
						}
					}, {
						min: 0,
						opposite: false, //optional, you can have it on the same side.
						title: {
							text: 'Average'
						}
					}
				],
				labels: {
					items: [{
						html: 'Monthly Expenditure',
						style: {
							left: '50px',
							top: '18px',
							color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
						}
					}]
				},
				
				tooltip: {
					formatter: function () {
						return '<b>' + this.x + '</b><br/>' +
							this.series.name + ': ' + this.y 
							/*+ '<br/>' + 'Total: ' + this.point.stackTotal*/;
					}
				},
				
				series: [{
					type: 'spline',
					name: 'Average',
					yAxis: 1, //to make y axis
					data: [660.2,60], //able to show correct graph with static input	
					//data: [<?php echo join($rows[data], ',') ?>],
					marker: {
						lineWidth: 2,
						lineColor: Highcharts.getOptions().colors[3],
						fillColor: 'white'
					}
				}]
			});
		});


		</script>
	</head>
	<body>
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<script src="https://code.highcharts.com/modules/exporting.js"></script>

	<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

	</body>
</html>

JavaScript

$(function () {
			$('#container').highcharts({
				title: {
					text: 'Monthly Expenditure'
				},
				xAxis: {
					categories: ['Jun', 'Jul']
				},
				yAxis: [{
						min: 0,
						title: {
							text: ''
						}
					}, {
						min: 0,
						opposite: false, //optional, you can have it on the same side.
						title: {
							text: 'Average'
						}
					}
				],
				labels: {
					items: [{
						html: 'Monthly Expenditure',
						style: {
							left: '50px',
							top: '18px',
							color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
						}
					}]
				},
				
				tooltip: {
					formatter: function () {
						return '<b>' + this.x + '</b><br/>' +
							this.series.name + ': ' + this.y 
							/*+ '<br/>' + 'Total: ' + this.point.stackTotal*/;
					}
				},
				
				series: [{
					type: 'spline',
					name: 'Average',
					yAxis: 1, //to make y axis
					data: [660.2,60], //able to show correct graph with static input	
					//data: [<?php echo join($rows[data], ',') ?>],
					marker: {
						lineWidth: 2,
						lineColor: Highcharts.getOptions().colors[3],
						fillColor: 'white'
					}
				}]
			});
		});
    
    src="https://code.highcharts.com/highcharts.js"
    src="https://code.highcharts.com/modules/exporting.js"