Run Chart with Histogram

by jlbriggs

HTML

<section id="wrapper">
	<div id="line-chart"></div>
	<div id="bar-chart"></div>
</section>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script>
var d          = new Date();
var pointStart = d.getTime();
    //-------------------------------------------------------
//set a 'line' marker type for use in bullet charts 
Highcharts.Renderer.prototype.symbols.vline = function(x, y, width, height) {
    return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
    return ['M',x ,y + height / 2,'L',x+width,y + width / 2];
};
//-------------------------------------------------------
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() {
            	if(typeof this.credits != 'undefined') {
                this.credits.element.onclick = function() {
                    window.open(
  ...

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:95%;
}
#wrapper {
	position:relative;
	margin:1em auto;
	padding:0;
	width:600px;
}
#line-chart {
	margin:0;
	padding:0;
	height:400px;
}
#bar-chart {
	position:absolute;
	top:0;
	right:0;
	width:150px;
	height:400px;
	margin:0;
	padding:0;
}

JavaScript

var dataPoints = 300;
var lineData   = randomData(dataPoints);
var barData    = binData(lineData);

var yMin, yMax, xMin, xMax, ext;

$(function() {
	var lineOptions = {
		chart: {
			type:'line',
      backgroundColor:'white',
			margin:[50,35,50,100],
      events: {
      	load: function() {
        	ext = this.yAxis[0].getExtremes();
          yMax = ext.max;
          yMin = ext.min;
          if(yMin > yMax) { yMax = Math.abs(yMin); }
          else            { yMin = (0-yMax); }
          this.yAxis[0].setExtremes(yMin,yMax);
        }
      }
		},
    title: { 
      text: 'Run Chart' ,
      align:'left',
      x:80
    },
    subtitle: { text: null },
		legend: { enabled: false },
    xAxis: {
      maxPadding:.37,
      title: { text: 'Run' }
		},
    yAxis : [{
      plotLines: [{
        value:0,
        width:.5,
        color:'rgba(0,0,0,.75)',
        zIndex:5
      }],
      title: { text: 'Values' }
		},{
    	linkedTo:0,
      opposite:true,
      title: { text: null },
      gridLineWidth:0,
		}],
		series: [{
			data: lineData
        }]
	};
	var barOptions = {
		chart: {
			type:'bar',
      backgroundColor:'transparent',
			margin:[50,35,50,10],
      events: {
      	load: function() {
          this.xAxis[0].setExtremes(yMin,yMax);
        }
      }
		},
		title: { 
      text: 'Distribution',
      align:'left',
      x:35
    },
		subtitle: { text: null },
		legend: { enabled: false },
		credits: { enabled: false },
		xAxis: {
			opposite: true,
      reversed: false,
      maxPadding:0,
      minPadding:0,
      tickWidth:0,
      lineWidth:0,
      labels: {
        enabled: false
      },
      title: { text: null }
		},
		yAxis: {
			reversed: true,
      maxPadding:0,
      endOnTick:false,
      gridLineWidth:0,
      labels: {
        enabled: false
      },
      title: { text: null }
		},
		series: [{
      pointPadding:0,
      groupPadding:0,
      borderWidth:0.5,
      borderColor:'rgba(255,255,255,0.5)',
     ...