Highcharts Histogram

by amrutaJgtp

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.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>
<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

Highcharts.stockChart('container', {
    chart: {
        zoomType: "x",
    },
    legend: {
        enabled: true
    },
    yAxis: [{

        },
        {
            id: "xrange",
            type: "datetime"
        },
        {
            id: "xrange3"
        }
    ],
    xAxis: {
        ordinal: false
    },
    plotOptions: {
        series: {
            turboThreshold: Number.MAX_VALUE
        },
        line: {
            cursor: "pointer",
            point: {
                events: {
                    'click': function(event) {
                        xclicked = event.point.x;
                        xindex = event.point.series.xData.indexOf(xclicked);
                        xVals = event.point.series.xData;
                        if (xindex > 0) {
                            that = this;
                            that.series.chart.series.forEach(function(seri) {
                                if (seri.type == 'arearange') {
                                    data = [

                                    ];
                                    xVal = that.x;
                                    yVals = seri.yData[
                                        that.index
                                    ];
                                    yVals = seri.xData.slice(seri.xData.indexOf(yVals[
                                            0
                                        ]),
                                        seri.xData.indexOf(yVals[
                                            1
                                        ] + 1));
                                    yVals.forEach(function(yVal) {
                                        if (yVal >= that.series.chart.xAxis[
                                                0
                                            ].dataMin && yVal < that.series.chart.xAxis[
                                                0
                                            ].dataMax) {
                      ...