Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

CSS

#container {
    height: 400px;
}

JavaScript

const chart = Highcharts.chart('container', {
  series: [{
    type: 'areaspline',
    data: [1, 4, 6, 8, 9, 4, 5, 7, 9, 12],
    zoneAxis: 'x',
    zones: [{
      value: 2,
      color: 'pink',
      fillColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
          [0, "rgba(255, 105, 104, 0)"],
          [1, "rgba(255, 105, 104, 0.3)"],
        ],
      },
    }, {
      value: 6,
      color: 'rgba(255, 252, 127, 1)',
      fillColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
          [0, "rgba(255, 252, 127, 0)"],
          [1, "rgba(255, 252, 127, 0.3)"],
        ],
      },
    }, {
      value: 10,
      color: 'rgba(40, 67, 135, 1)',
      fillColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
          [0, "rgba(40, 67, 135, 0)"],
          [1, "rgba(40, 67, 135, 0.3)"],
        ],
      },
    }]
  }]
});