Chart Color gradient

with Highcharts

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height:340px;"></div>

CSS

body {
  background: black;
}
.highcharts-yaxis-grid .highcharts-grid-line:first-child, .highcharts-yaxis-grid .highcharts-grid-line:last-child {
    opacity: 0;
}
.highcharts-point {
    stroke: #000;
    stroke-width: 1px;
}
.highcharts-label {
    font-family: sf_pro_display;
    letter-spacing: .13px;
}

JavaScript

var maxValue = 225;
var thresholdAlarm = 175;
var boundaryAlarm = thresholdAlarm / maxValue; // boundary num num

var chart = new Highcharts.Chart({

  chart: {
    renderTo: 'container',
    backgroundColor: '#000',
    
  },
	time: {
            timezoneOffset: 0
        },
  title: {
    text: '',
  },
  legend :{
  	enabled: false
  },
  xAxis: {
			type: 'datetime',
			title: {
            text: ''
        },
        gridLineColor: 'rgb(255,255,255,0.2)',
        gridLineWidth: 1,
        gridZIndex: 50,
        offset: 0,
         
        
        
        tickPositioner: function() {
            var ticks = [
                Date.UTC(2012, 5, 22, 8, 10), 
                Date.UTC(2012, 5, 22, 9, 10),
                Date.UTC(2012, 5, 22, 10, 10),
                Date.UTC(2012, 5, 22, 11, 10),
                Date.UTC(2012, 5, 22, 12, 10),
                Date.UTC(2012, 5, 22, 13, 10),
                Date.UTC(2012, 5, 22, 14, 10),
                Date.UTC(2012, 5, 22, 15, 10),
                Date.UTC(2012, 5, 22, 16, 10),
                Date.UTC(2012, 5, 22, 17, 10),
                Date.UTC(2012, 5, 22, 18, 10)];
            //dates.info defines what to show in labels
            //apparently dateTimeLabelFormats is always ignored when specifying tickPosistioner
            ticks.info = {
                unitName: "hour", //unitName: "day",
                higherRanks: {} // Omitting this would break things
            };           
            return ticks;
        },
        tickInterval: 3600 * 1000,
				startOnTick: false,
        tickAmount: 1,
        tickmarkPlacement: 'on',
        tickWidth: 0,
        lineColor: 'transparent',
    		lineWidth: 1,
    		labels: {
      		style: {
        		color: '#666',
        		fontSize: '11px'
      		}
    		},
  	},
		
  yAxis: {
    title: {
            text: ''
        },
        
    labels: {
      style: {
        color: '#666',
        fontSize: '11px'
      },
      
      align: 'right',
        ...