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>
     <button id="updateticks">Update Xaxis ticks</button>
    <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,
]

const chart = Highcharts.chart("container", {
  chart: {
    events: {
      load: function () {
        const xAxis = this.xAxis[1];
				//debugger;
        xAxis.update({
          tickPositions: [
            1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4
          ],
        })
      },
    },
  },
  title: {
    text: "Highcharts Histogram",
  },

  xAxis: [
    {
      title: { text: "Data" },
      alignTicks: false,
      startOnTick: true,
      endOnTick: true,
    },
    {
      title: { text: "Histogram" },
      alignTicks: false,
      opposite: true,
      //tickPositions: [1,2,3,4,5,6,7],
      startOnTick: true,
      endOnTick: true,
    },
  ],

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

  plotOptions: {
    histogram: {
      binsNumber: "sturges",
      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,
    },
    {
      name: "Data",
      type: "scatter",
     ...