Displaying a minimalist Highcharts stockchart - highcharts

Question

I have a stockchart which updates, but I'm trying to display it in the whole of the area. I can't disable the scrolbar because it stops the movement of the line chart, it is camouflaged. The working code is in this jsfiddle, any ideas how to get the line to fully fit the area? nIdeally I would be displaying the chart at 50px.
https://jsfiddle.net/garynobles/5Lsxtqu4/5/
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="time_test" style="height: 150px; min-width: 310px; border-style:solid;"></div>
<script>
// Create the chart
Highcharts.stockChart('time_test', {
chart: {
backgroundColor: '#343a40',
title: {
text: ''
},
subtitle: {
text: ''
},
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
time: {
useUTC: false
},
// rangeSelector: {
// enabled: false
// },
rangeSelector: {
buttons: [{
count: 30,
type: 'minute',
text: ''
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
}],
credits: {
enabled: false
},
scrollbar: {
barBackgroundColor: '#343a40',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: '#343a40',
buttonBorderWidth: 0,
buttonBorderRadius: 7,
trackBackgroundColor: 'none',
trackBorderWidth: 1,
trackBorderRadius: 8,
trackBorderColor: '#343a40'
},
xAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
title: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
minPadding: 0,
maxPadding: 0
},
yAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
minPadding: 0,
maxPadding: 0
},
navigator: {
enabled: false
},
});
</script

Answer 1

"any ideas how to get the line to fully fit the area"
Yes remove all useless options like that :
rangeSelector: {
enabled: false,
},
scrollbar: {
enabled: false,
},
Then really use all remaining space with these options :
chart: {
spacingBottom:0,
spacingTop:0,
spacingLeft:0,
spacingRight:0
},
Fiddle