Highcharts Demo

author(s): Torstein Hønsi

by Ben Clayton

HTML

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

<div id="container" style="height: 400px; max-width: 800; margin: 0 auto"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    "yAxis": {
      "plotLines": [{
        "width": 1,
        "color": "#808080",
        "value": 0
      }],
      "min": 0,
      "title": {
        "text": "Sessions Booked / Gym Capacity"
      }
    },
    "xAxis": {
      "dateTimeLabelFormats": {
        "week": "%e %b %Y",
        "month": "%b %Y",
        "day": "%e %b %Y"
      },
      "title": "Gym",
      "categories": ["London-Holborn\n\n", "London-North-Finchley\n\n", "London-Bermondsey\n\n", "London-Hammersmith-Palais\n\n", "London-Wandsworth\n\n", "London-Wall\n\n", "Leeds-Bramley\n\n", "Glasgow-Bath-Street\n\n", "Manchester-Exchange-Quay\n\n", "Birmingham-Beaufort-Park\n\n", "Manchester-Urban-Exchange\n\n", "Edinburgh-Waterfront\n\n", "Newcastle-Eldon-Garden\n\n", "Colne\n\n", "Sheffield-Millhouses\n\n", "Purley\n\n", "Luton-&-Dunstable\n\n", "Borehamwood\n\n", "Leicester-St-Georges\n\n", "Liverpool-Central\n\n", "Wolverhampton-South\n\n", "Brighton\n\n", "Manchester-Moston\n\n", "Oxford-Central\n\n", "Woking\n\n", "Cardiff-Central\n\n", "Belfast-Boucher-Road\n\n", "Aberdeen-Shiprow\n\n", "Billericay\n\n", "Warrington-North\n\n", "Harlow\n\n", "Bristol-Union-Gate\n\n", "Walsall\n\n", "Poole\n\n", "Mansfield\n\n", "Nottingham-Beeston\n\n", "Sunderland\n\n", "Milton-Keynes\n\n", "Northampton\n\n", "Aintree\n\n", "Bristol-Barrow-Road\n\n", "Plymouth\n\n", "Cambridge\n\n", "Wakefield\n\n", "Brierley-Hill\n\n", "Derby\n\n", "Lincoln\n\n", "Rochdale\n\n", "Newport-Gwent\n\n", "Dundee\n\n", "Oldham\n\n", "Newtownabbey\n\n", "Stoke-On-Trent-East\n\n", "Stoke-On-Trent-North\n\n", "Bangor-Northern-Ireland\n\n", "Redditch\n\n", "Coventry-Warwickshire\n\n"]
    },
    "chart": {
      "zoomType": "x",
      "min-width": 250,
      "max-width": 0,
      "type": "column",
      "renderTo": "graph-15584"
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": true
    },
    "series": [{
      "name": "Sessions Booked",
     ...