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',
    animation: false,
    spacingTop: 0,
    spacingRight: 0,
    spacingBottom: 0,
    spacingLeft: 0,
    plotBorderWidth: 0,
    margin: [0, 0, 0, 0]
  },
  title: {
    text: null
  },
  credits: {
    enabled: false
  },
  tooltip: {
    enabled: false
  },

  xAxis: {
    visible: false,
    margin: [0, 0, 0, 0],
    tickPosition: 'inside',
    tickmarkPlacement: 'on',
    minPadding: 0,
    maxPadding: 0
  },
  yAxis: {
    visible: false,
    margin: [0, 0, 0, 0],
  },

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

    },
    area: {
      fillColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
          [0, '#fff'],
          [1, '#fff0']
        ]
      },
    },
  },
  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]
  }]
});