Highcharts Bell Curve

by chrisloughnane

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

(function (H) {
    function normalDensity(x, mean, standardDeviation) {
        var translation = x - mean;
        return Math.exp(
            -(translation * translation) /
            (2 * standardDeviation * standardDeviation)
        ) / (standardDeviation * Math.sqrt(2 * Math.PI));
    }
    H.seriesTypes.bellcurve.prototype.derivedData = function (mean, standardDeviation) {
        var intervals = this.options.intervals,
            pointsInInterval = this.options.pointsInInterval,
            x = mean - intervals * standardDeviation,
            stop = intervals * pointsInInterval * 2 + 1,
            increment = standardDeviation / pointsInInterval,
            data = [],
            zoneStops = [],
            point,
            i;

        for (i = 0; i < stop; i++) {

            point = [x, normalDensity(x, mean, standardDeviation)];
            data.push(point);

            // Calculate zones to present standard deviation.
            if (i && i % pointsInInterval === 0) {
                zoneStops.push(point[0]);
            }

            x += increment;
        }
        this.chart.zoneStops = zoneStops;

        return data;
    };
}(Highcharts));

var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4,
    4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2,
    3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3,
    3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3,
    2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3,
    2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3,
    2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6,
    3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2,
    2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7,
    3.2, 3.3, 3, 2.5, 3, 3.4, 3
];

Highcharts.setOptions({
    colors:...