Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container"></div>

CSS

#container {
    height: 400px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
  series: [{
    type: 'areaspline',
    data: [50, 70, 100, 115],
    zoneAxis: 'y',
    zones: [{
        value: 20,
        color: '#ffff00',
      },
      {
        value: 40,
        color: '#ffff00',
      },
      {
        value: 80,
        color: '#00ff00',
      },
      {
        value: 99,
        color: '#ffff00',
      },
      {
        value: 120,
        color: '#ff6968', // Red color for the line
        fillColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, "rgba(255, 105, 104, 0.3)"], // Lighter red gradient start
            [0.1, "rgba(255, 105, 104, 0)"], // Transparent at the bottom
          ],
        },
      }
    ]
  }]
});