JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.highcharts.com/js/highcharts.js"></script>
<div id="container" style="width: 520px; height: 400px"></div>
JavaScript
var chart;
jQuery(document).ready(function() {
chart = new Highcharts.Chart({
"chart": {
"renderTo": "container",
"defaultSeriesType": "line",
"marginRight": "130",
"marginBottom": "25"
},
"xAxis": {
"categories": ["Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"]
},
"yAxis": {
"title": {
"text": "Rainfall (mm)"
},
"plotLines": {
"value": "0",
"width": "1",
"color": "#808080"
}
},
"legend": {
"layout": "vertical",
"align": "right",
"verticalAlign": "top",
"x": "10",
"y": "100",
"borderWidth": "0"
},
"series": [{
"name": "Tokyo",
"data": ["49.9",
"71.5",
"106.4",
"129.2",
"144.0",
"176.0",
"135.6",
"148.5",
"216.4",
"194.1",
"95.6",
"54.4"]},
{
"name": "New York",
"datas": ["83.6",
"78.8",
"98.5",
"93.4",
"106.0",
"84.5",
"105.0",
"104.3",
"91.2",
"83.5",
"106.6",
"92.3"]},
{
...