Highcharts Demo

author(s): Sebastian Domas

by koh_edwin

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

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.chart('container', {
	chart: {
  	events: {
    	load: function () {
      	this.series[0].points[20].update({
        	marker: {
          	enabled: true,
            fillColor: 'white',
            radius: 6,
            lineWidth: 2,
            lineColor: 'red'
          }
        })
      }
    }
  },
  title: {
    text: null
  },

  legend: {
    enabled: false
  },

  xAxis: [{
    title: {
      text: null
    },
    visible: false
  }, {
    title: {
      text: '5 Meter Sprint'
    },
    opposite: false,
    visible: true
  }],

  yAxis: [{
    title: {
      text: null
    },
    visible: false
  }, {
    title: {
      text: null
    },
    opposite: true,
    visible: false
  }],

  series: [{
    name: null,
    type: 'bellcurve',
    xAxis: 1,
    yAxis: 1,
    intervals: 4,
    baseSeries: 1,
    enableMouseTracking: false,
  }, {
    name: 'Data',
    data: data,
    visible: false,
  }]
});