Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 95%"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    height: 250,
    plotBorderColor: '#BFBFBF',
    plotBorderWidth: 1,
    spacingLeft: 0,
    spacingRight: 1,
    spacingBottom: 0,
    marginBottom: 87
  },
  title: {
    text: null
  },
  credits: {
    enabled: false
  },
  legend: {
    align: 'left',
    itemStyle: {
      color: "#000",
      fontSize: "11px !important",
      fontWeight: "bold",
      textOverflow: null
    },
    symbolWidth: 20,
    x: 17,
    itemMarginBottom: 6
  },
  xAxis: {
    minPadding: 0.06,
    type: 'datetime',
    dateTimeLabelFormats: {
      week: '%b-%d-%Y',
      month: '%b-%d-%Y',
      year: '%Y'
    },
    labels: {
      style: {
        fontSize: "10px !important",
        color: "#000"
      }
    },
    gridLineColor: "transparent",
    gridLineWidth: 0,
    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: "transparent",
    tickLength: 0,
    style: {
      fontSize: "10px !important",
      color: "#000"
    }
  },
  yAxis: [{
      min: 0,
      max: 100,
      tickInterval: 20,

      gridLineWidth: 0.5,
      title: {
        text: ""
      },
      labels: {
        style: {
          fontWeight: 'bold',
          color: 'black'
        },
        x: -7,
        y: 5,
        formatter: function() {
          return this.value;
        }
      }
    },
    {
      linkedTo: 0,
      title: {
        text: ""
      },
      width: 25,
      labels: {
        enabled: false
      },
      plotBands: [{
          color: 'rgb(204,0,0)',
          from: 0,
          to: 30.99,
          zIndex: 3
        },
        {
          color: 'rgb(226,113,113)',
          from: 31,
          to: 44.99,
          zIndex: 3
        },
        {
          color: 'rgb(247,209,34)',
          from: 45,
          to: 54.99,
          zIndex: 3
        },
        {
          color: 'rgb(136,207,136)',
          from: 55,
          to: 68.99,
          zIndex: 3
        },
        {
          color: 'rgb(68,180,68)',
         ...