Highcharts Histogram

by amrutaJgtp

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;
}

.highcharts-description {
    margin: 0.3rem 10px;
}

JavaScript

const 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", {
  title: {
    text: "Highcharts Histogram",
  },

  xAxis: [
    {
      title: { text: "Data" },
      alignTicks: false,
    },
    {
      title: { text: "Histogram" },
      alignTicks: false,
      opposite: true,
      type: "linear",
      //tickPositions: [0,10,25,55,80],
      startOnTick: true,
      endOnTick: true,
      plotLines: [
        {
          value: 2,
          color: "red",
        },
        {
          value: 2.3,
          color: "green",
          zIndex: 5
        },
      ],
    },
  ],

  yAxis: [
    {
      title: { text: "Data" },
    },
    {
      title: { text: "Histogram" },
      opposite: true,
    },
  ],

  plotOptions: {
    histogram: {
      accessibility: {
        point: {
          valueDescriptionFormat:
            "{index}. {point.x:.3f} to " + "{point.x2:.3f}, {point.y}.",
        },
      },
    },
  },

  series: [
    {
      name: "Histogram",
      type: "histogram",
      xAxis: 1,
      yAxis: 1,
      baseSeries: "s1",
      zIndex: -1,
      dataLabels: {
        enabled: true,
        format: "{point.x} => " + " {point.x2} :: " + "{point.y:.0f}",
      },
    },
    {
      name: "Data",
      type: "scatter",
      data: data,
      id: "s1",
     ...