Highcharts Histogram

by jeffgw

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
<div id="container"></div>

CSS

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

JavaScript

var data = [ 0.09, -3.41, 0.1, -1.62, -0.25, 3.58, -3.15, -6.8, 2.28, -1.08, 1.08, -0.54, -0.46, 0.0, 4.1, -2.12, 0.84, 0.39, 0.82, -2.0, 2.94, -1.64, 0.94, 0.4, 0.23, -3.15, 0.43, -0.75, -0.43, -0.49, 3.15, -0.64, 1.25, 4.37, 3.68, -0.59, -0.34, 1.65, -1.33, -2.29, -0.64, 0.81, -1.95, -2.43, -1.78, 1.19, -1.27, 2.95, -1.02, -0.83, 0.62, 6.26, -0.81, 0.33, 0.94, -0.51, 1.14, 2.09, -0.75, 1.58, 0.44, 0.35, -2.0, -2.34, 1.54, 1.95, -1.06, 2.49, -1.46, -1.57, -3.06, 0.11, 3.41, -6.52, -3.75, 1.71, 2.51, -0.42, 3.65, 0.43, -0.21, 3.41, 1.7, 1.53, -1.8, -2.26, -3.54, 1.27, -0.53, -1.54, 1.25, -0.96, -0.59, 5.61, -1.06, -4.44, -0.32, -1.31, -2.42, -0.96, 1.93, -2.35, -2.45, 0.88, -8.22, -7.67, 3.24, -5.13, 5.96, 7.26, 6.54, -2.01, -3.32, 5.2, -1.24, -2.28, 2.13, -3.02, -1.23, 1.97, 2.29, -3.28, -2.37, 0.1, -1.04, 1.71, 3.01, -0.06, 1.84, 0.61, -5.55, 3.39, 2.95, -0.26, 1.61, -0.59, -1.3, -3.02, -2.67, 0.81, -0.68, -2.71, 2.77, -3.33, 1.48, -0.44, 0.36, 1.76, 2.81, -2.4, 2.49, 1.67, -1.87, 9.74, -1.07, 0.5, 4.55, 3.21, 0.59, 3.75, 0.13, 3.53, -4.93, 2.74, -4.06, -3.99, -0.19, 2.7, 0.74, 1.57, -1.99, -2.3, -7.23, -0.55, -0.08, 3.11, 1.24, -1.09, -0.71, 0.68, -2.75, 4.06, 0.36, -1.12, -2.08, -3.31, -1.9, 3.8, -0.68, -3.15, -2.3, 2.75, 0.91, 16.19, -0.4, -1.77, 10.99, -2.43, -4.83, 0.87, 0.25, -2.46, -2.57, -0.96, -8.93, 0.96, 4.36, -0.08, -0.48, 0.85, -1.1, -2.32, -2.2, -0.61, -0.49, -4.21, -2.84, 0.07, -6.3, 8.46, -2.12, 3.97, -0.37, 1.98, -0.12, -3.35, 4.93, -0.23, 0.26, 0.12, 0.51, 2.85, -0.67, -13.9, 17.35, -3.12, -2.07, -4.4, -7.05, -4.35, 4.89, -2.25, -1.77];

Highcharts.chart('container', {
    title: {
        text: 'Highcharts Histogram'
    },
    xAxis: [{
        title: { text: 'Sample Days' },
        alignTicks: false
    }, {
        title: { text: 'Histogram' },
        alignTicks: false,
        opposite: true
    }],

    yAxis: [{
        title: { text: 'Data' }
    }, {
        title: { text: '% Return' },
        opposite: true
    }],

    series:...