Highcharts Bell Curve

by chrisloughnane

HTML

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

CSS

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

JavaScript

Highcharts.chart('container', {
  chart: {
    height: 300,
    type: 'areaspline',
    events: {
      render: function() {
        var chart = this,
          xAxis = chart.xAxis[0],
          point,
          svgElem,
          x1,
          y1,
          y2;

        if (chart.customSvgElements) {
          chart.customSvgElements.forEach(function(elem) {
            elem.destroy();
          });
        }

        chart.customSvgElements = [];

        chart.series.forEach(function(series) {
          if (series.options.type === 'scatter') {

            point = series.points[0];

            x1 = point.plotX + chart.plotLeft;
            y1 = point.plotY + chart.plotTop + point.graphic.radius;
            y2 = chart.plotTop + chart.plotHeight;

            svgElem = chart.renderer.path([
                'M', x1, y1, 'L', x1, y2, 'z'
              ])
              .attr({
                stroke: point.color,
                'stroke-width': 1
              })
              .add()
              .toFront();

            chart.customSvgElements.push(svgElem);
          }
        });
      }
    }
  },
  yAxis: {
    max: 150
  },
  plotOptions: {
    scatter: {
      showInLegend: false,
      marker: {
        symbol: "circle",
        radius: 5
      },
      dataLabels: {
        enabled: true,
        align: 'left',
        x: -10,
        y: -5,
        formatter: function() {
          var header = '<span style="color: ' + this.series.color + ';">' + this.series.name + '</span>',
            footer = '<span style="color: ' + this.series.color + ';">' + this.x + '%</span>';

          return header + '<br>' + footer;
        }
      }
    }
  },
  series: [{
    name: 'Scores',
    data: [
      [0, 0],
      [10, 10],
      [20, 45],
      [30, 80],
      [40, 45],
      [50, 10],
      [60, 0],
      [70, 3],
      [80, 15],
      [90, 2],
      [100, 0]
    ],
    marker: {
      enabled: false
    }
  }, {
    name: "Median score",
    type: 'scatter',
...