Chart Color gradient

with Highcharts

by bilelz

HTML

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

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

CSS

body {
  background: black;
}

JavaScript

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']
      ]
    }

  }]

});