Highcharts Demo

author(s): Torstein Hønsi

by Danielle Parkinson

HTML

<div class="tile">
  <h1>
    Overall Satisfaction
  </h1>

  <div class="chart">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>

    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  </div>
</div>
<div class="tile thirds">
  <div class="content">
    <h1>
      Booking
    </h1>
  </div>

</div>
<div class="tile thirds">
  <div class="content">

    <h1>
      Pre-flight
    </h1>
  </div>
</div>
<div class="tile thirds">
  <div class="content">
    <h1>
      On the Day
    </h1>
  </div>
</div>

CSS

body {
  background-color: #f2f2f2;
  box-sizing: border-box;
  margin: 15px 0;
}

.chart {
  width: 100%;
}

.tile {
  background-color: #fff;
  height: 300px;
  padding: 2px 20px;
  margin: 10px;
}

.tile.thirds {
  display: inline-flex;
  flex-direction: row;
  height: 250px;
  min-width: 27%;
}

h1 {
  font-size: 24px;
  font-family: open sans;
  text-transform: uppercase;
  color: #f60;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'area',
    height: '230px'
  },
  title: {
    text: null
  },
  subtitle: {
    text: null
  },
  xAxis: {
    allowDecimals: false,
    labels: {
      formatter: function() {
        return this.value; // clean, unformatted number for year
      }
    }
  },
  yAxis: {
    title: {
      text: null
    },
    labels: {
      formatter: function() {
        return this.value / 1000 + 'k';
      }
    }
  },
  tooltip: {
    pointFormat: '{series.name} had stockpiled <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
  },
  plotOptions: {
    area: {
      pointStart: 1940,
      marker: {
        enabled: false,
        symbol: 'circle',
        radius: 2,
        states: {
          hover: {
            enabled: true
          }
        }
      }
    }
  },
  series: [{
    name: 'Overall satisfaction',
    data: [
      null, null, null, null, null, 6, 11, 32, 110, 235,
      369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468,
      20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342,
      26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
      24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380,
      21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824,
      10577, 10527, 10475, 10421, 10358, 10295, 10104, 9914, 9620, 9326,
      5113, 5113, 4954, 4804, 4761, 4717, 4368, 4018
    ]
  }, 
  ]
});