Highcharts Demo

author(s): Torstein Hønsi

by Santosh Giridhara

HTML

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

<div id="container"></div>

JavaScript

Highcharts.chart('container', {
  
  title: {
    useHTML: true,
    text: "<img src='http://www.agweek.com/sites/all/themes/agweek_theme/images/submenu_triangle.png' alt='' />" + "1%"
  },
  subtitle: {
    text: 'YoY Difference'
  },
  xAxis: {
    type: 'category',
    title: {
      text: null
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: null
    }
  },
  tooltip: {
    shared: true,
    useHTML: true,
    headerFormat: '<table>',
    formatter: function() {
      var result = '<table>';
      $.each(this.points, function(i, datum) {
        $.each(datum.point.tooltip, function(key, value) {
          result += '<tr><td>' + key + '</td><td>' + value + '</td></tr>';
        });
      });
      result += '</table>';
      return result;
    }
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },
  credits: {
    enabled: false
  },
  series: [{
 	 	type: 'bar',
    showInLegend: true,
    name: 'Headcount By Org',
    data: [{
      name: 'Vianne Sha',
      y: 36,
      tooltip: {
        'Organization': 'Vianne Sha',
        'As of date': 'Nov 6th 2017',
        'Headcount': 7,
        'Total Headcount': 19
      }
    }, {
      name: 'Allen Zhang',
      y: 26,
      tooltip: {
        'Organization': 'Allen Zhang',
        'As of date': 'Nov 6th 2017',
        'Headcount': 1,
        'Total Headcount': 12
      }
    }, {
      name: 'Shwetha Krishnakumar',
      y: 21,
      tooltip: {
        'Organization': 'Shwetha Krishnakumar',
        'As of date': 'Nov 6th 2017',
        'Headcount': 5,
        'Total Headcount': 44
      }
    }, {
      name: 'Bala Balasubramaniam',
      y: 7,
      tooltip: {
        'Organization': 'Bala Balasubramaniam',
        'As of date': 'Nov 6th 2017',
        'Headcount': 6,
        'Total Headcount': 16
      },
    }]
  },
  {
        type: 'pie',
        name: 'Total consumption',
        data: [{
            name: 'Jane',
            y: 13,
            color:...