Histogram demo distribution

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"></div>

CSS

#container {
  max-width: 800px;
  height: 400px;
  margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Allergy season cases reported among US adults in 2012'
  },
  xAxis: {
    gridLineWidth: 1,
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    title: {
      text: 'Percentage of U.S. allergic adults'
    },
    labels:{
    format:'{value} %'
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.y + '%</b> of U.S. aduls were allergic in <b>' + this.x + '</b>';
    }
  },
  series: [{
    name: 'Percentage of U.S. allergic adults',
    type: 'column',
    data: [12, 13, 16.5, 21.8, 22.1, 18.8, 15.9, 15.5, 18, 17.6, 14, 12.8],
    pointPadding: 0,
    groupPadding: 0,
  }]
});