Highcharts Demo

author(s): Torstein Hønsi

by shruti patil

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

#container {
    height: 400px;
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'column'
    },

    title: {
        text: 'Click points to go to URL'
    },

    xAxis: {
        type: 'category'
    },

    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        console.log(this.options)
                        alert('Category: ' + this.category + ', value: ' + this.y);
                            
                    }
                }
            }
        }
    },

    series: [{
        data: [{
            y: 29.9,
            name: 'USA',
            key: 'United_States'
        }, {
            y: 71.5,
            name: 'Canada',
            key: 'Canada'
        }, {
            y: 106.4,
            name: 'Mexico',
            key: 'Mexico'
        }]
    },{
        data: [{
            y: 29.9,
            name: 'USA',
            key: 'United_States'
        }, {
            y: 71.5,
            name: 'Canada',
            key: 'Canada'
        }, {
            y: 106.4,
            name: 'Mexico',
            key: 'Mexico'
        }]
    }]
});