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>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        
    </p>
</figure>

CSS

#container {
    height: 400px;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

const dataFastOneField=[376.09999999403954,388.29999999701977,254.89999999850988,252.60000000149012,234.30000000447035,244.5,245.69999999552965,247.5,372.29999999701977,246.39999999850988,246.70000000298023,251,242,245.29999999701977,252.70000000298023,258.70000000298023,246.89999999850988,255.89999999850988,247.60000000149012,248.60000000149012,270],
	dataSlowOneField=[1629.5999999940395,1592.2000000029802,1376.6000000014901,1310.6000000014901,1379.1000000014901,1549.9000000059605,1463.6000000014901,1400.5,1559.3999999985099,1548.9000000059605,1451.2999999970198,1248.5,1363.8999999985099,1509,1303,1331.4000000059605,1330,1460.3999999985099,1375.5,1320.5,1331.3999999985099],
  dataFastTwoFields=[244.30000000447035,327.6000000014901,249.89999999850988,346.8999999985099,240.59999999403954,322.3999999985099,247.69999999552965,340.3999999985099,245.89999999850988,327.79999999701977,271.8999999985099,360.79999999701977,243.19999999552965,324.8999999985099,247.60000000149012,334.79999999701977,246.29999999701977,340.29999999701977,232.40000000596046,319.6000000014901],
  dataSlowTwoFields=[2974.89999999851,3413.89999999851,2641.2000000029802,3062.5,2556.7000000029802,2974.39999999851,2614.7999999970198,3033.2999999970198,2537.6999999955297,2965.5,2683.3000000044703,3052.60000000149,2672.60000000149,3011.3000000044703,3122.7999999970198,3536,2815.6999999955297,3225.6999999955297,2561.9000000059605,2984.3000000044703],
  unmountUpdate=[457.30000000074506,552.3000000007451,272.5,363.2999999988824,246.90000000037253,338.7999999988824,255.09999999962747,356.30000000074506,252.5,350.5,258.40000000037253,350.40000000037253,254.7000000011176,347.30000000074506,253.30000000074506,344.90000000037253,244.7000000011176,335.30000000074506,272.1000000014901,364.30000000074506,258.7000000011176,349.80000000074506];
  
  

Highcharts.chart('container', {

    title: {
        text: 'Performance code'
    },

    xAxis: [{
        title: {
            text: 'Data'
        },
       ...