Highcharts Demo

author(s): Torstein Hønsi

by Sascha

HTML

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

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

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },
  xAxis: {
    type: 'category'
  },
  plotOptions: {
    bar: {
      grouping: false,
    }
  },
  series: [{
    name: 'Manufacturing',
    color: 'red',
    data: [{name: 'Manufacturing', y: 24916, x: 0}]
  }, {
    name: 'Sales & Distribution',
    color: 'blue',
    data: [{name: 'Sales & Distribution', y: 11816, x: 1}]
  }, {
    name: 'Project Development',
    color: 'orange', 
    data: [{name: 'Project Development', y: 34400, x: 2}]
  }, {
    name: 'Other',
    color: 'green', 
    data: [{name: 'Other', y: 12908, x: 3}]
  }, {
    name: 'Manufacturing',
    color: 'red',
    data: [{name: 'Manufacturing', y: 5000, x: 4}]
  }]
});