<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>


  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  <p><i>This chart shows global sales figures for Apple Mac computers during the last 5 years (2014-present). The numbers indicate that sales increase dramatically in every 4th quarter, remain high in the 1st quarter, then decline rapidly in the 2nd and 3rd quarters. This tendency can be explained by Apple holding its annual event (where it showcases new devices) during Q4 -- users buy the newest Macs during Q4 and subsequent Q1, but prefer to wait for newer devices during time periods of Q2 and Q3.</i></p>
</div>

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Sales of Apple Mac Computers'
  },
  subtitle: {
    text: 'Source: Apple'
  },
  xAxis: {
    categories: [
      'Q1 2014',
      'Q2 2014',
      'Q3 2014',
      'Q4 2014',
      'Q1 2015',
      'Q2 2015',
      'Q3 2015',
      'Q4 2015',
      'Q1 2016',
      'Q2 2016',
      'Q3 2016',
      'Q4 2016',
      'Q1 2017',
      'Q2 2017',
      'Q3 2017',
      'Q4 2017',
      'Q1 2018',
      'Q2 2018',
      'Q3 2018',
      'Q4 2018'

    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Sales (in thousand units)'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: 'Mac',
    data: [4837, 4136, 4413, 5520, 5519, 4563, 4796, 5709, 5312, 4034, 4252, 4886, 5374, 4199, 4292, 5386, 5112, 4078, 3720, 5299]

  }]
});