Highcharts Demo

author(s): Torstein Hønsi

by Sascha

HTML

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

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

CSS

#container {
  background-image: linear-gradient(12deg, rgb(86, 171, 47), rgb(168, 224, 99));
  height: 30px;
  width: 250px;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'area',
    backgroundColor: 'transparent',
    margin: 0
  },
  title: {
    text: null
  },
  credits: {
    enabled: false
  },
  tooltip: {
    enabled: false
  },

  xAxis: {
    visible: false,      
    minPadding: 0,
    maxPadding: 0
  },
  yAxis: {
    visible: false,    
  },

  plotOptions: {
    series: {
      animation: false,
      states: {
        hover: {
          enabled: false
        }
      },
      marker: {
        enabled: false
      },

    },
    area: {
      fillColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 1,
          y2: 1
        },
        stops: [
          [0, Highcharts.getOptions().colors[0]],
					[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]]
      },
    },
  },
  legend: {
    enabled: false
  },
  series: [{
    color: '#fff',
    data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});