score:2

Accepted answer

the only problem i see is that you are missing a double quote in your second <script> tag. otherwise, it seems to work fine.

var 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' }
}, {
    title: { text: 'histogram' },
    opposite: true
}],

yaxis: [{
    title: { text: 'data' }
}, {
    title: { text: 'histogram' },
    opposite: true
}],

series: [{
    name: 'histogram',
    type: 'histogram',
    xaxis: 1,
    yaxis: 1,
    baseseries: 's1',
    zindex: -1
}, {
    name: 'data',
    type: 'scatter',
    data: data,
    id: 's1',
    marker: {
        radius: 1.5
    }
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
<div id="container" height="400px" width="800px"></div>

score:1

it works in jsfiddle https://jsfiddle.net/dgdcnmwx/

first, the html you posted is invalid html. your second script is missing a closing ". the div's id has invisible white space characters. there is no html element, etc.

your html should look like this:

    <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
    </head>
    <body>
    <div id="container" height="400px " width="800px "></div> 
    </body>
    <script>
        var 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' }
        }, {
            title: { text: 'histogram' },
            opposite: true
        }],

        yaxis: [{
            title: { text: 'data' }
        }, {
            title: { text: 'histogram' },
            opposite: true
        }],

        series: [{
            name: 'histogram',
            type: 'histogram',
            xaxis: 1,
            yaxis: 1,
            baseseries: 's1',
            zindex: -1
        }, {
            name: 'data',
            type: 'scatter',
            data: data,
            id: 's1',
            marker: {
                radius: 1.5
            }
        }]
        });
    </script>
</html>

Related Query

More Query from same tag