Highcharts Demo

author(s): Torstein Hønsi

by AbhishekRohan

HTML

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

<svg style="height: 0">
	<defs>
        <linearGradient id="gradient-0" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" />
            <stop offset="1" />
        </linearGradient>
        <linearGradient id="gradient-1" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" />
            <stop offset="1" />
        </linearGradient>
    </defs>
</svg>
<div id="container"></div>

CSS

@import 'https://code.highcharts.com/css/highcharts.css';
#container {
  height: 400px;
  max-width: 800px;
  min-width: 320px;
  margin: 0 auto;
}

/* Define the stop colors */

#gradient-0 stop {
  stop-color: #7cb5ec;
}

#gradient-0 stop[offset="0"] {
  stop-opacity: 0.75;
}

#gradient-0 stop[offset="1"] {
  stop-opacity: 0;
}

#gradient-1 stop {
  stop-color: #cccccc;
}

#gradient-1 stop[offset="0"] {
  stop-opacity: 0;
}

#gradient-1 stop[offset="1"] {
  stop-opacity: 0.25;
}

/* Apply the gradients */

.highcharts-plot-background {
  fill: url(#gradient-1);
}

.highcharts-color-0 .highcharts-area {
  fill-opacity: 1;
  fill: url(#gradient-0);
}

JavaScript

Highcharts.chart('container', {

  title: {
    text: 'Gradients in styled mode'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    type: 'area',
    keys: ['y', 'selected'],
    data: [
      [29.9, false],
      [71.5, false],
      [106.4, false],
      [129.2, false],
      [144.0, false],
      [176.0, false],
      [135.6, false],
      [148.5, false],
      [216.4, true],
      [194.1, false],
      [95.6, false],
      [54.4, false]
    ]
  }]
});