Histogram

by woozyking

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/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Chart showing how Highcharts can automatically compute a histogram from
source data. In this chart, the source data is also displayed as a
scatter plot.
</p>
</figure>

CSS

.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 data = [
  30.002893,
  14.104069,
  31.43606,
  20.371998,
  35.80727,
  20.371998,
  33.792343,
  14.162786,
  18.108442,
  38.377487,
  18.108442,
  20.371998,
  11.815049,
  18.108442,
  18.108442,
  25.978146,
  11.879422,
  18.868958,
  36.312336,
  10.690149,
  18.108442,
  20.371998,
  10.53493,
  33.068436,
  45.329163,
  17.52967,
  46.998386,
  38.55083,
  30.37578,
  22.851736,
  22.08553,
  20.371998,
  20.371998,
  20.371998,
  19.37671,
  18.591291,
  18.934666,
  13.636187,
  38.007526,
  16.66904,
  20.371998,
  20.079395,
  55.093197,
  21.390938,
  27.531454,
  16.059624,
  20.371998,
  39.891804,
  12.98262,
  20.371998,
  57.584213,
  13.8705015,
  18.563522,
  18.723167,
  13.039636,
  18.108442,
  98.80072,
  22.252787,
  19.702213,
  23.845509,
  18.108442,
  17.017237,
  61.624886,
  14.321173,
  41.878975,
  21.68404,
  20.371998,
  18.851377,
  16.866959,
  32.63652,
  25.262457,
  26.382784,
  36.386772,
  24.523075,
  23.695696,
  29.509674,
  35.96329,
  15.47982,
  18.108442,
  16.197412,
  46.834354,
  16.787561,
  15.153266,
  18.108442,
  38.65532,
  14.536161,
  28.008036,
  44.336468,
  42.279854,
  20.371998,
  22.334255,
  18.108442,
  24.688435,
  17.074703,
  49.857628,
  21.341131,
  16.745972,
  18.108442,
  20.371998,
  14.703036,
  20.371998,
  31.674152,
  21.182316,
  39.499947,
  26.64074,
  18.108442,
  20.371998,
  28.672976,
  20.223927,
  18.108442,
  27.52056,
  15.963664,
  20.371998,
  13.457969,
  18.108442,
  17.373198,
  20.371998,
  19.75048,
  18.108442,
  19.093086,
  42.521164,
  18.108442,
  20.371998,
  14.266818,
  18.196602,
  52.06151,
  18.108442,
  12.2830515,
  28.973482,
  24.058989,
  37.893997,
  18.415869,
  15.783289,
  49.86276,
  16.102566,
  21.694511,
  24.88021,
  31.140797,
  20.371998,
  11.547988,
  16.352585,
  27.475878,
  18.108442,
  20.371998,
  29.421417,
  18.108442,
  40.480442,
  20.435251,
  30.079788,
  47.562584,
  17.384876,
  15.697515,
  15.911797,
  26.993013,
...