var maxValue = 225; var thresholdAlarm = 175; var boundaryAlarm = thresholdAlarm / maxValue; // boundary num num var chart = new Highcharts.Chart({ chart: { renderTo: 'container', backgroundColor: '#' }, title: { text: 'Chart Color gradient', style: { color: '#CCC' } }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { labels: { style: { color: '#CCC' } }, gridLineColor: '#111111' }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 225, 194.1, 95.6, 54.4], type: 'areaspline', marker: { enabled: false }, color: { linearGradient: { x1: 0, y1: 1, x2: 0, y2: 0 }, stops: [ [0, '#99aacc'], [0.75 * boundaryAlarm, '#99aacc'], [boundaryAlarm, '#DA090E'], [1, '#DA090E'] ] }, fillColor: { linearGradient: { x1: 0, y1: 1, x2: 0, y2: 0 }, stops: [ [0, 'transparent'], [0.75 * boundaryAlarm, 'transparent'], [1, '#DA090E'] ] } }] });
<script src="https://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 500px"></div>
body { background: black; }