Highcharts Demo

author(s): Torstein Hønsi

by AlexLvovsky

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id=main>
  <div id="chart" style="min-width: 310px; height: 170px; margin: 0 auto"></div>
</div>

CSS

html, body
{
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#main {
    position: relative;
    overflow: hidden;
    height: 100%;
}

#chart {
  border: 1px solid black;
    overflow: hidden;
    position: fixed; 
    bottom:0%;
    width:100%; 
}

JavaScript

Highcharts.chart('chart', {
	chart: {
		backgroundColor: "beige",
		type: "spline"
	},
	legend: {
	  enabled: false
	},
	xAxis: {
		type: "datetime"
	},
	yAxis: {
		offset: 0,
		min: 0,
		 title: {
		  text: "",
		},
	},
	plotOptions: {
		series: {
			marker: {
				enabled: false
			},
			states: {
				hover: {
					enabled: false
				}
			}
		},
		spline: {
			softThreshold: false
		}
	},
	tooltip: {
		outside: true,
		crosshairs: true,
		shared: true,
		shadow: false,
		backgroundColor: "rgba(255,255,255, 0.8)",
		borderColor: "#e6e7e8",
		borderWidth: 1,
		valueSuffix: " seconds",
    style: {
    	height: "100px"
    }
	},
	series: [{
		name: "1",
		logicName: "1",
		data: [[1548756101933,
		1128.89088439941],
		[1548756300000,
		1128.89088439941],
		[1548756600000,
		1674.96881103516],
		[1548756900000,
		1615.78437805176],
		[1548757200000,
		1710.2374572754],
		[1548757500000,
		1713.40205383301],
		[1548757800000,
		1318.22409057617],
		[1548758100000,
		661.644294738769],
		[1548758400000,
		827.300819396973],
		[1548758700000,
		804.184097290038],
		[1548759000000,
		940.559637069702],
		[1548759300000,
		641.494018554687],
		[1548759600000,
		641.494018554687],
		[1548759701934,
		641.494018554687]],
		unit: "sec"
	},
	{
		name: "2",
		logicName: "2",
		data: [[1548756101933,
		3.7629696146647],
		[1548756300000,
		3.7629696146647],
		[1548756600000,
		5.583229370117199],
		[1548756900000,
		5.3859479268392],
		[1548757200000,
		5.700791524251333],
		[1548757500000,
		5.711340179443367],
		[1548757800000,
		4.3940803019205665],
		[1548758100000,
		2.2054809824625634],
		[1548758400000,
		2.75766939798991],
		[1548758700000,
		2.6806136576334603],
		[1548759000000,
		3.13519879023234],
		[1548759300000,
		2.13831339518229],
		[1548759600000,
		2.13831339518229],
		[1548759701934,
		2.13831339518229]],
		unit: "sec/s"
	},
	{
		name: "3",
		logicName: "3",
		data:...