Dynamic Bar - Adjust Height

by anikettiwari

HTML

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

<div>
	<a href="http://stackoverflow.com/questions/39894055/dynamic-height-of-chart-of-highchart/39895506#39895506">http://stackoverflow.com/questions/39894055/dynamic-height-of-chart-of-highchart/39895506#39895506</a>
</div>
<div id="container" style="width:500px;height:400px;"></div>


<script>
  var d = new Date();
  var pointStart = d.getTime();
  Highcharts.setOptions({
    global: {
      useUTC: false
    },
    colors: [
      'rgba( 0,   154, 253, 0.9 )', //bright blue
      'rgba( 253, 99,  0,   0.9 )', //bright orange
      'rgba( 40,  40,  56,  0.9 )', //dark
      'rgba( 253, 0,   154, 0.9 )', //bright pink
      'rgba( 154, 253, 0,   0.9 )', //bright green
      'rgba( 145, 44,  138, 0.9 )', //mid purple
      'rgba( 45,  47,  238, 0.9 )', //mid blue
      'rgba( 177, 69,  0,   0.9 )', //dark orange
      'rgba( 140, 140, 156, 0.9 )', //mid
      'rgba( 238, 46,  47,  0.9 )', //mid red
      'rgba( 44,  145, 51,  0.9 )', //mid green
      'rgba( 103, 16,  192, 0.9 )' //dark purple
    ],
    chart: {
      alignTicks: false,
      type: '',
      margin: [60, 25, 100, 90],
      //borderRadius:10,
      //borderWidth:1,
      //borderColor:'rgba(156,156,156,.25)',
      //backgroundColor:'rgba(204,204,204,.25)',
      //plotBackgroundColor:'rgba(255,255,255,1)',
      style: {
        fontFamily: 'Abel,serif'
      },
      events: {
        load: function() {
          this.credits.element.onclick = function() {
            window.open(
              'http://stackoverflow.com/users/1011544/jlbriggs?tab=profile'
            );
          }
        }
      }
    },
    credits: {
      text: 'http://stackoverflow.com/users/1011544/jlbriggs',
      href: 'http://stackoverflow.com/users/1011544/jlbriggs?tab=profile'
    },
    title: {
     ...

CSS

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);
body {
  font-family: Abel, Calibri, Helvetica, sans-serif;
  font-size: 85%;
}
div {
	margin: 1em;
	clear: both;
}

JavaScript

var chart;

//randomly generated data - change this number to update the number of bars
//replace random data function with your data array
var dataPoints = 12,
  chartData = randomData(dataPoints, true);
chartData.sort(numSortR); //sort the data by largest value
 
//count the data points
var barCount = chartData.length,
	pointWidth = 20,
  marginTop = 70,
  marginRight = 10,
  marginBottom = 50,
  marginLeft = 100,
  groupPadding = 0,
  pointPadding = 0.3,
	chartHeight = marginTop + marginBottom + ((pointWidth * barCount) * (1 + groupPadding + pointPadding));

//random category generator for random data (not relevant)
var categories = alphaCats(barCount);

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'bar',
      marginTop: marginTop,
      marginRight: marginRight,
      marginBottom: marginBottom,
      marginLeft: marginLeft,
      height: chartHeight
    },
    title: {
      x: (marginLeft * 0.75)
    },
    subtitle: {
      x: (marginLeft * 0.75)
    },
    plotOptions: {
      bar: {
        pointPadding: 0,
        groupPadding: groupPadding,
        pointWidth: pointWidth
      }
    },
    legend: {
      enabled: false
    },
    tooltip: {
      shared: true
    },
    xAxis: {
      title: {
        text: null
      },
      categories: categories,
      labels: {
        style: {
          fontWeight: 'bold'
        }
      }
    },
    yAxis: {
      title: {
        text: null
      }
    }
  });
  chart = $('#container').highcharts();
  chart.addSeries({
    data: chartData
  });
	chart.yAxis[0].addPlotLine({
		value: mean(chartData),
		width: 1,
		color: 'rgba(0,0,0,0.5)',
		zIndex: 5,
		label: {
			text: 'Mean',
			rotation: 0,
			align: 'center',
			x: -2,
			y: -5
		}
	});

})

//get the mean of an array of numbers
function mean(data) {
  var len = data.length;
  var sum = 0;
  for (var i = 0; i < len; i++) {
    sum += parseFloat(data[i]);
  }
  return (sum / len);
}
//because .sort() doesn't sort numbers...