Normal Curve in Highcharts

author(s): Ben McCormick

by ben336

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>


<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

const lowerBound = 100, upperBound = 300;

const normalY = (x, mean, stdDev) => Math.exp((-0.5) * Math.pow((x - mean) / stdDev, 2));

const getMean = (lowerBound, upperBound) => (upperBound + lowerBound) / 2;

// distance between mean and each bound of a 95% confidence interval 
// is 2 stdDeviation, so distance between the bounds is 4
const getStdDeviation = (lowerBound, upperBound) => (upperBound - lowerBound) / 4;



const generatePoints = (lowerBound, upperBound) => {
  let stdDev = getStdDeviation(lowerBound, upperBound); 
  let min = lowerBound - 2 * stdDev;
  let max = upperBound + 2 * stdDev;
  let unit = (max - min) / 100;
  return _.range(min, max, unit);
}

let mean = getMean(lowerBound, upperBound);
let stdDev = getStdDeviation(lowerBound, upperBound);
let points = generatePoints(lowerBound, upperBound);


let seriesData = points.map(x => ({ x, y: normalY(x, mean, stdDev)}));

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    series: [{
        data: seriesData,
    }],
});