Column chart

author(s): Mustapha Mekhatria

by mustapha mekhatria

HTML

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

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column',
    zoomType: 'y'
  },
  title: {
    text: 'Weekly Work Hour'
  },
  xAxis: {
    categories: ['1980', '1990', '2000'],
    title: {
      text: null
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Weekly work hours',
      align: 'high'
    },
    labels: {
      overflow: 'justify',
      format: '{value}h/week',
    }
  },
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true,
        format: '{y}h',
      }
    }
  },
  tooltip: {
    formatter: function() {
      return this.y + 'h/week';
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 80,
    borderWidth: 1,
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Denmark',
    color:'#81d4fa',
    data: [37.5, 35, 38.5]
  }, {
    name: 'France',
    color:'#fff59d',
    data: [40.7, 39.9, 35.75]
  }, {
    name: 'Spain',
    color:'#a5d6a7',
    data: [40, 38.9, 34.45]
  }]
});