Highcharts Demo

author(s): Torstein Hønsi

by Arvind Pal

HTML

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

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Complaints and Incidents'
  }, 
  xAxis: {
    categories: [
      '2014',
      '2015',
      '2016',
      '2017',
      '2018',
      '2019',
      '2020'
    ],
    crosshair: false
  },
  yAxis: {
    min: 0,
    title: {
      text: 'count'
    }
  },
  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} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0,
      stacking:'normal'
    }
  },
  series: [{
      name: 'primary',
      data: [1013, 1058, 1080, 1086, 1046, 319]
    }, 
    {
      name: 'IT',
      data: [1029, 1086, 1004, 1042, 1080, 306, 290,2333]
    },
    {
      name: 'outsourcing',
      data: [514, 507, 507, 526, 149, 521,23,45,234]
    },
    {
      name: 'privacy',
      data: [514, 507, 507, 526, 149, 521,23]
    }
  ]
});