Highcharts Demo

author(s): Torstein Hønsi

by Roland Doda

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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: 360px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  credits: {
    enabled: false
  },
  title: {
    text: null
  },
  tooltip: {
    shared: true
  },
  plotOptions: {
    column: {
      grouping: false,
      borderWidth: 0
    }
  },
  yAxis: {
    title: false
  },
  legend: {
    enabled: false
  },
  xAxis: {
    categories: [
      'Law Department',
      'Science Department',
      'Medical Department'
    ]
  },
  series: [
    {
      data: [
        300000,
        200000,
        250000
      ],
      name: 'Budget',
      type: 'column',
      pointPadding: 0.3
    },
    {
      data: [
        194627.6,
        194627.6,
        0
      ],
      name: 'Actual Spend',
      type: 'column',
      pointPadding: 0.4
    }
  ]
});