JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css">
<script src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div data-role="page">
<div data-role="header" data-theme="a" data-position="fixed">
<h3>Heading</h3>
<a data-role="button" data-inline="false" data-theme="a" href="#panel" data-icon="bars" data-iconpos="notext"></a>
</div>
<div id="content" data-role="content" style="padding: 1%">
<div style="padding-top: 5px; padding-bottom: 10px; position: relative; width: 100%;">
<div id="hg_graph" style="width: 100%"></div>
</div>
<div style="padding-top: 5px; padding-bottom: 10px; position: relative; width: 100%;">
<div data-role="header" role="banner">
<h1 role="heading">asdf</h1>
</div>
<ul data-role="listview" data-inset="true" data-theme="c" style="margin-top: 0"></ul>
</div>
</div>
<div data-role="panel" id="panel" data-position="left" data-display="reveal" data-theme="b" data-position-fixed="true">
<ul data-role="listview" data-divider-theme="g" data-inset="false">
<li data-theme="c">
<a href="#dashboard" data-transition="slide">Dashboard</a>
</li>
<li data-theme="c">
<a href="#sessions" data-transition="slide">Sessions</a>
</li>
<li data-theme="c">
<a href="#tournaments" data-transition="slide">Tournaments</a>
</li>
<li data-theme="c">
<a href="#graphstats" data-transition="slide">Graphs & Stats</a>
</li>
<li data-theme="c">
<a href="#settings" data-transition="slide">Settings</a>
</li>
</ul>
</div>
</div>
</body>
JavaScript
$("#hg_graph").highcharts({
chart: {
type: "area",
height: 200,
width:200,
spacingLeft: 5,
spacingRight: 5
},
credits: {
enabled: false
},
title: {
show: true,
style: {
fontSize: "1.2em"
},
margin: 25
},
legend: {
enabled: false
},
xAxis: {
allowDecimals: false,
minTickInterval: 1,
labels: {
style: {
fontSize: "0.8em"
},
enabled: true
},
title: {
offset: 30,
style: {
fontSize: "0.8em"
}
}
},
yAxis: {
title: {
style: {
fontSize: "0.8em"
}
},
showFirstLabel: true,
gridLineColor: "#EFEFEF",
labels: {
style: {
fontSize: "0.8em"
},
}
},
tooltip: {
enabled: false
},
series: [{
data: [1, 2, 4, 5, 6, 1, 2, 1, 2, 4, 2, 1, 2]
}]
...